如何阻止useEffect进入无限循环或useEffect内的setState答案

【问题标题】：How to stop useEffect from going infinite loop or setState inside useEffect如何阻止useEffect进入无限循环或useEffect内的setState
【发布时间】：2020-06-08 13:09:41
【问题描述】：

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

这是我的代码。

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]）时，它会进入无限循环。如果我不添加任何依赖项，它不会设置状态。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

将selectedDataAgain 引入useEffect 并包含selectedData 作为依赖项

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);
 
  console.log("selectedDataAgainTable", tableData);

  const { GetUserLoadVendors } = props;

  React.useEffect(() => {
   const selectedDataAgain = selectedData
    ? selectedData.vendorUserResourceList
    : null;

  console.log("selectedDataAgain", selectedDataAgain);    // this one is working this shows array of data.
    const access_token = localStorage.getItem("access_token");
    GetUserLoadVendors(access_token);          <--- this is the actions
    setTableData(selectedDataAgain);           <--- here am trying to set State
  }, [selectedData]);

我认为您不希望 useEffect 在 GetUserLoadVendors 更改时触发，如果您愿意，可以包含 GetUserLoadVendors 的依赖项，但请确保您希望在创建它的位置使用 useCallback 将其包装（父组件）。

【讨论】：

【解决方案2】：

理想情况下，您不需要将数据从 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

【讨论】：