如何在功能性 React 组件中正确设置状态？答案

【问题标题】：How do I setState properly in a functional React component?如何在功能性 React 组件中正确设置状态？
【发布时间】：2020-08-23 22:54:13
【问题描述】：

我已经在这样的功能性 React 组件中实现了 React State Hook：

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

在我的组件中，我执行异步 API 请求并用结果填充表格：

const loadArtikel = () =>
    fetch("https://my-api.com/api/v1/xyz")
        .then(res => (res.ok ? res : Promise.reject(res)))
        .then(res => res.json())


return (
    <Async promiseFn={loadArtikel}>
        {({ data, err, isLoading }) => {
            if (isLoading) return (<div>Loading...</div>)
            if (err) return `Something went wrong: ${err.message}`

            if (data) {
                var tempData = [];
                Object.keys(data.artikel).map(function (keyName, keyIndex) {
                    tempData.push(data.artikel[keyName]);
                });
                setTableData(tempData); // this line is causing problems
                return (
                    <MaterialTable
                        data={tableData}
                    />
                )
            }
        }}
    </Async>
);

当我使用setTableData() 时，这会导致一次又一次地重复获取请求。我不知道为什么。

【问题讨论】：

标签： reactjs asynchronous fetch react-hooks state

【解决方案1】：

这实际上导致了无限循环，因为组件将在每次其 props/state 更改时重新渲染。在这种情况下，您在组件的返回中直接调用setTableData，这会更新状态。这反过来会导致组件再次重新渲染，从而导致请求被一遍又一遍地调用。

如果这个方法只被调用一次，你应该在useEffect钩子中使用它，用一个空数组作为依赖数组：

useEffect(() => {  
  fetch('https://my-api.com/api/v1/xyz')
    .then(response => response.json())
    .then(result => {
      // process data
      const tempData = ......;
      setTableData(tempData);
    });     
}, []);


return (
  <>
  {
    tableData.length 
      ? (
        <MaterialTable
          data={tableData}
        />
      : <div>Loading...</div>
  } 
  </>
);

【讨论】：

非常感谢！解决了我的问题。