如何从 Child 组件更新 Parent 组件中的状态两次？

Question

我将“isLoadingToggle”传递给我的 Child 组件，如下所示：

export function Parent() {

const [isLoading, setIsLoading] = useState(false)

function toggleIsLoading() {
  setIsLoading(!isLoading)
}

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

}

和Child：

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 状态更改。 axiospost之后的第二次调用不是

我怎样才能让 isLoading 在我调用它时切换 parent？

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

如何从 Child 组件更新 Parent 组件中的状态两次？

How can I update state twice in a Parent component from a Child component?

reactjs

axios

components

rendering

use-state