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
  ))
)}

Answer 3

  <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] }])
      })
    }
  />

用react hooks设置值的问题

3 个答案: