React调用回调会干扰useState

Question

我有一个页面，它有一个子组件(Card(数组。在父级中，我保存有多少张卡片被点击。因此，每张卡片都有一个回调函数，当点击时会更新变量。这还可以，只是我也为每张卡保存在本地状态，无论它们是否被点击(点击时会翻转(。但当我调用回调时，更新本地状态不起作用(或者组件被重置，或者我不知道发生了什么(，但它不会更新本地状态。

父级：

export default function Game() {
  const [flipState, setFlipState] = useState(0);
  function flipCallback() {
    if (flipState == 0) {
      setFlipState(1);
    } else if (flipState == 1) {
      setFlipState(2);
    } else if (flipState == 2) {
      setFlipState(0);
    }
  }
  let tileOrder = [...Array(36).keys()];
  let cards = tileOrder.map((e, i) => (
    <Card
      key={"card" + i + "-" + e}
      iconSet={1}
      index={i}
      speed={1}
      callback={() => {
        flipCallback();
      }}
      state={flipState}
    />
  ));
  return (<div>{cards}</div>);
}

孩子：

export default function Card({ iconSet, index, speed, callback, state }) {
  const [isFlipped, setFlipped] = useState(false);
const handleFlip = () => {
    if (isFlipped === false && (state === 0 || state === 1)) {
      callback();
      setFlipped(true);
      console.log(isFlipped); // This is false, unless I comment out the callback above
      if (state == 2) {
        setTimeout(() => {
          setFlipped(false);
        }, speed * 1000);
      }
    }
  };
  const statusUpdate = useCallback(() => {
    if (isFlipped && state == 2) {
      setTimeout(() => {
        setFlipped(false);
        callback();
      }, speed * 1000);
    }
  }, [isFlipped, speed, state, callback]);
  useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      setCardState(state);
      statusUpdate();
    }
    return () => {
      isMounted = false;
    };
  }, [state, statusUpdate]);
  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
      <button onClick={handleFlip}>
        Blank
      </button>
      <button>{index}</button>
    </ReactCardFlip>
  );
}

Answer 1

当您在child中的handleFlip fn中调用callback()时，组件将被重新渲染，并且您再次将isFlipped初始化为false。所以，你可以做的是把你的子组件当作一个受控组件&从父组件设置子组件的状态(即是否翻转(。所以，本质上，传递子组件是否从父组件翻转过来。