Question

例如，我有这个组件

const FooBar = (props) => {
  console.log("render")
  const [foo, setFoo] = useState(props.foo)
  useEffect(() => {
    setFoo(props.foo)
  }, [props.foo])
  return (
    <div>
      {foo} <button onClick={() => setFoo(x => x + 1)}>component plus</button>
    </div>
  );
}

我可以这样改变道具

const App = () => {
  const [foo, setFoo] = useState(1)
  return (
    <div>
      <FooBar foo={foo} />
      <button onClick={() => setFoo(x => x + 1)}>parent plus</button>
    </div>
  );
}

当我单击parent plus按钮时，FooBar组件将rerender两次。第一个来自道具变更，第二个来自setFoo内部的useEffect。如何防止第二次重新提交？

Answer 1

我不确定这个示例的目标是什么。如果您想让两个按钮增加相同的计数器，则您的代码当前无法正常工作。

如果您多次单击“加号”按钮，然后单击“父加号”按钮，则您的计数器将重置为上次单击父按钮时的值。

如果要向子组件传递状态，通常不希望将传递的状态另存为子组件状态。这将使同步这两种状态变得不必要地困难。

您要做的是传递状态和将状态设置为子组件的函数。

您的示例将如下所示：

const App = () => {
  const [foo, setFoo] = React.useState(1);

  return (
    <div>
      <FooBar foo={foo} setFoo={setFoo} />
      <button onClick={() => setFoo(x => x + 1)}>parent plus</button>
    </div>
  );
};

const FooBar = props => {
  console.log("render");

  return (
    <div>
      {props.foo} <button onClick={() => props.setFoo(x => x + 1)}>component plus</button>
    </div>
  );
};

使用props，useState和useEffect时如何防止双重重投？

1 个答案: