redux 警告：呈现不同的Y组件时无法更新组件X,要在Y中找到错误的setState()调用，

gcxthw6b 于 2022-11-24 发布在其他

关注(0)|答案(2)|浏览(216)

我有一个带有react-redux的Cart组件，还有一个showProducts组件，它从useEffect中的API（使用await-async）获取产品，然后我使用useState设置一些状态，并使用dispatch更新redux状态。我一直收到这样的警告：

Warning: Cannot update a component (`Cart`) while rendering a different component (`ShowProducts`). To locate the bad setState() call inside `ShowProducts`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
ShowProducts@http://localhost:3000/static/js/main.chunk.js:3099:73

我有一个商店页面，在我的商店页面中有：

<Grid item xs container >
    <ShowProducts />
 </Grid>
 <Grid item xs container direction="column">
    <Cart />
 </Grid>

在我展示产品中：

useEffect(async () => {
    await getData();
  }, []);
  .
  dispatch(setShippingCosts);
  dispatch(setCompanyNam);
  .
  .
  .
  async function getData() {
    fetch(
      `url`
    )
      .then((res) => res.json())
      .then((data) => {
       .
       .
       .
        setProducts(...);
        setShippingCost(...);
       .

      })
      .catch((error) => {
        setError(error);
      });
  }

在我的购物车中，我使用的是来自show products组件的运费。我不确定如何修复此警告，我一直在搜索，但还没有找到解决方案。此警告有多严重，我不确定为什么会出现此警告。
完整警告：

redux

来源：https://stackoverflow.com/questions/70556785/warning-cannot-update-a-component-x-while-rendering-a-different-y-component-to

2条答案

按热度按时间

nsc4cvqm1#

问题是当一个组件正在呈现时，一个组件将另一个组件中的更新排入队列。（Bug: too hard to fix "Cannot update a component from inside the function body of a different component."）

问题：

呈现ShowProducts时，它还会分派一个操作，使更新在购物车中排队。

修复：

将分派移到useEffect内。

说明：

通过使用这个Hook，你告诉React你的组件需要在render之后做一些事情。React会记住你传递的函数（我们将它称为“effect”），并在执行DOM更新之后调用它。What does useEffect do?
以下是sandbox pen，用于演示错误和修复。（打开右下角的控制台查看警告，您可以在渲染中注解掉分派，然后看到警告消失）
请注意，您使用的是useEffect async，它应该是仅同步的。Read here

赞(0）回复(0）举报 2022-11-24

iqxoj9l92#

我遇到了同样的问题，我的问题的根源有点不同，它导致了同样的错误。
我尝试更新useState的setState的updater回调的主体中的父组件的状态（通过回调属性），如下所示：

...
const [state, setState] = useState();

useState((prev) => {
  const newState = someOperationToGenerateNewStateFromTheOldOne(prev);
  updateStateOfParentComponent();//this call caused the issue because as the error says causes update of parent component during the state change(render) of this component
  return newState;
})

作为一种修复方法，您可以如下所示使用useEffect：

...
const [state, setState] = useState();
useEffect(() => {
   updateStateOfParentComponent();
}, [state])

useState((prev) => {
  return someOperationToGenerateNewStateFromTheOldOne(prev);
})

赞(0）回复(0）举报 2022-11-24

我来回答

redux 警告：呈现不同的Y组件时无法更新组件X,要在Y中找到错误的setState()调用，

2条答案

相关问题

热门标签

最新问答