使用react hooks设置值的问题

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

该onClick应

onClick={() => setIsHidden(

  isHidden.map((hidden, hiddenIndex) => (

    index === hiddenIndex ? !hidden : hidden

  ))

)}