reactjs - 如何阻止useEffect进入无限循环或useEffect内的setState

Question

我在调度useEffect后调度动作我想从 redux 状态获取状态并将其传递给组件内部的本地状态但问题是每当我尝试这样做时它要么进入无限循环，要么根本没有 setState。我不知道如何解决这个问题。任何帮助都会很棒。

这是我的代码。

const [tableData, setTableData] = React.useState([]);



 const DataReceived = (state) =>                              <--- Here I am getting state from store.
    state.AllUsers.Seller.sellerDetails.data._embedded;
  const selectedData = useSelector(DataReceived, shallowEqual);
  const selectedDataAgain = selectedData
    ? selectedData.vendorUserResourceList
    : null;

  console.log("selectedDataAgain", selectedDataAgain);    <--- this one is working this shows array of data.
  console.log("selectedDataAgainTable", tableData);

  const { GetUserLoadVendors } = props;

  React.useEffect(() => {
    const access_token = localStorage.getItem("access_token");
    GetUserLoadVendors(access_token);          <--- this is the actions
    setTableData(selectedDataAgain);           <--- here am trying to set State
  }, []);

当我在 useEffect 中添加可选的第二个参数时，就像[GetUserLoadVendors, selectedDataAgain]它进入无限循环一样。如果我不添加任何依赖项，它不会设置状态。

标签： reactjsreduxreact-redux

Answer 1

理想情况下，您不需要将数据从 props 复制到 state，因为它可以直接从 redux state 派生。

但是，如果需要，您应该在单独的 useEffect 中编写更新逻辑，例如

const [tableData, setTableData] = React.useState([]);

const DataReceived = (state) =>                     
    state.AllUsers.Seller.sellerDetails.data._embedded;
const selectedData = useSelector(DataReceived, shallowEqual);
const selectedDataAgain = selectedData
    ? selectedData.vendorUserResourceList
    : null;

  console.log("selectedDataAgain", selectedDataAgain);  
  console.log("selectedDataAgainTable", tableData);

  const { GetUserLoadVendors } = props;

  React.useEffect(() => {
    const access_token = localStorage.getItem("access_token");
    GetUserLoadVendors(access_token);
  }, []);

  React.useEffect(() => {
      setTableData(selectedDataAgain);

  }, [selectedData]) // Dependency is selectedData and not selectedDataAgain since reference of selectedDataAgain changes on every render whereas it doesn't for selectedData