功能组件中带有UseEffect和UseState的reactpromise不起作用

Question

我在使用useEffect和useState获取数据并将其设置为功能组件中的状态时遇到问题。

我的问题是，我想保持与axios async/wait在一个单独的文件中完成数据获取，以提高应用程序的可伸缩性，但我不明白如何更新状态，以防promise被解决（而不是拒绝）。

特别是，我试图从promise中检索一个名为data In state的表行数组，但我不知道如何在state中设置响应的结果

下面是组件文件中的代码：

const [data, setData] = React.useState([]);
useEffect(() => {
   const { id } = props.match.params;
   props.getTableRows(id).then((res) => {
     setData(res);
   });
   //or is it better:
   //props.getTableRows(id).then(setData);  ?
}, []);

还有我的行动。js:

export const getTableRows = (id, history) => async (dispatch) => {
  try {
    const res = await axios.get(`/api/test/${id}`);
    dispatch({
      type: GET_TEST,
      payload: res.data.rows,
    });
 } catch (error) {
    history.push("/test");
 }
};

不幸的是，这段代码不起作用，错误：Uncaught（在promise中）TypeError：无法读取未定义的属性“forEach”

我发现了另一个解决方案，它是在use效应方法中定义promise，如下所示：

useEffect(() => {
   const { id } = props.match.params;
   const fetchData = async () => {
       const result = await axios.get(`/api/test/${id}`);
       setData(result.data.rows);
   };

fetchData();
}, []);

这段代码在我的应用程序中起作用，但正如我所说的，我不喜欢在组件文件中有promise，我想让它们全部付诸实施。js用于应用程序可伸缩性（在url更改的情况下，我不必更改所有文件），但在这种情况下，我不知道将setData（result.data.rows）放在哪里；在最后一个例子中，哪一个似乎是正确的选择

有什么建议吗？谢谢

Answer 1

我没有看到您从getTableRow返回任何内容。您只是分派了结果，但没有返回函数调用的res。如果您提供错误跟踪，这将是有帮助的。

Answer 2

您仍然需要使用async/await。这个然后（）在返回值时执行，但是您的函数将继续呈现，并且不会等待它。（通过尝试在空状态下访问forEach导致错误）。在它通过错误的promise之后。然后（）将更新这些值，这就是为什么您可以在控制台中看到它们。

useEffect(() => {
  async function getData() {
      const { id } = props.match.params;
      await props.getTableRows(id).then((res) => {
       setData(res);
      });
  }
  getData()
}, []);

此外，在访问状态之前，可以检查空值（通常是良好的做法）。

if (this.state.somestate != null) {
//Run code using this.state.somestate
}