Question

我像这样将“isLoadingToggle”传递给我的子组件：

export function Parent() {

const [isLoading, setIsLoading] = useState(false)

function toggleIsLoading() {
  setIsLoading(!isLoading)
}

return ( <Child toggleIsLoading={toggleIsLoading} /> )

}

和孩子：

export function Child({ toggleIsLoading }) {

...

const toggle = useCallback(() => {
   // set the isLoading effect in the parent
   toggleIsLoading()

   axios.post(someUrl...)
   .then(response =>
      // do something with response
      // then tell the parent it's not loading anymore
      toggleIsLoading()
   }).catch(error => {
      // do something with error
      // then tell the parent it's not loading anymore
      toggleIsLoading()
   })
 }, []);

return ( <Button onClick={toggle}>Toggle isLoading in parent!</Button> )

仅注册第一个 isLoading 状态更改。在 axios 帖子之后的第二个调用不是。

我怎样才能让 isLoading 在我调用它时在父级中切换？

Answer 1

解释这里发生的事情有点棘手。任何时候改变状态，整个组件都会重新渲染。因此，当您收到响应并调用 toggleIsLoading() 时。它并没有真正切换 isLoading 的值。它使用第一次渲染时的旧 isLoading 值。

你可以做的是像这样将布尔参数传递给 toggleIsLoading

toggleIsLoading(true)
toggleIsLoading(false)

并像这样定义你的函数

function toggleIsLoading(loading) {
  setIsLoading(loading)
}

这是工作演示 https://stackblitz.com/edit/react-vgrkkf?file=src/Parent.js

如何从子组件更新父组件中的状态两次？

1 个答案: