使用反应挂钩设置值的问题

Question

我是钩子的新手，我遇到了使用它们的问题。我有两个组成部分：

const Button = ({ isHidden, icon, onClick }) => {
  return (
    <div>
      {isHidden ? (
        <button className="tile" onClick={onClick} />
      ) : (
        <button className="tile" onClick={onClick}>
          <i className={icon} />
        </button>
      )}
    </div>
  );
};

const Board = () => {
  const [isHidden, setIsHidden] =useState(Array(12).fill(true));
  const [icon] = useState(animalArray);

  const renderButton = index => {
    return (
      <Button
        icon={icon[index]}
        isHidden={isHidden[index]}
        onClick={() =>setIsHidden(!isHidden[index])}
      />
    );
  };
  return (
    <div className="board">
      <div className="container">
        <div className="row align-items-start">
          <div className="col-3">{renderButton(0)}</div>
          <div className="col-3">{renderButton(1)}</div>
          <div className="col-3">{renderButton(2)}</div>

所以当然我想在点击按钮后切换特定图块中的isHidden状态。相反，我会在第一次点击时翻转每个瓷砖，然后在下面的点击中没有任何反应。我尝试修改它，比如创建新变量，复制isHidden等等。谢谢。

Answer 1

由于状态更新程序不合并状态，因此需要将整个更新状态传递给更新程序并使用回调模式。您还需要返回一个新的数组实例而不是修改它，否则状态提升器不会检测到更改，它将不会重新呈现

const renderButton = index => {
    return (
      <Button
        icon={icon[index]}
        isHidden={isHidden[index]}
        onClick={() =>setIsHidden(prevHidden => Object.assign([], prevHidden, {[index]: !prevHidden[index])}
      />
    );
  };

Answer 2

  <Button
    icon={icon[index]}
    isHidden={isHidden[index]}
    onClick={() =>setIsHidden(!isHidden[index])}
  />

您的状态（isHidden）是一个数组，但您将其更新为布尔值。

你可以这样做：

  <Button
    icon={icon[index]}
    isHidden={isHidden[index]}
    onClick={() =>
      setIsHidden(oldArray => {
        return Object.assign([...oldArray, { [index]: !oldArray[index] }])
      })
    }
  />

Answer 3

onClick应该是

onClick={() => setIsHidden(
  isHidden.map((hidden, hiddenIndex) => (
    index === hiddenIndex ? !hidden : hidden
  ))
)}