2

我正在使用react-table库进行过滤和分页。我正在使用来自自定义 API 的请求数据Node并使用useTable来自react-table. 的文档react-table说应该记住表数据，所以我使用了useMemo钩子。代码如图所示：

  const data = React.useMemo(() => {
    axios.get("/custom/api/endpoint")
      .then((res) => {
        return res.data;   //Returns an array of objects
      })
      .catch((err) => {
        console.log("err");
      });
  }, []);

但是，我收到以下错误：

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at accessRowsForColumn (useTable.js:591)
    at useTable.js:195
    .
    .

谁能帮我解决这个问题？提前致谢！

4

4 回答 4

1

您已经定义了一个承诺并且没有返回它，因此代码不会等待承诺解决。尝试使用 async await 语法，这更容易可视化流程。

  const data = React.useMemo(async () => {
    
      try {
        const res = await axios.get("/custom/api/endpoint") 
        return res.data
      } catch(err) {
        throw err
      }
 
  }, []);
于 2021-05-22T20:43:06.623 回答
1

您正在记住 axios 创建的承诺。而是使用 进行调用useEffect()，并设置状态。除非您再次设置状态，否则数据不会更改：

const [data, setData] = useState([]); // use an empty array as initial value

useEffect(() => {
  axios.get("/custom/api/endpoint")
    .then((res) => {
      setData(res.data); // set the state
    })
    .catch((err) => {
      console.log("err");
    });
}, []);
于 2021-05-22T20:37:48.000 回答
0

您正在调用中使用此箭头函数useMemo。

() => {
    axios.get("/custom/api/endpoint")
      .then((res) => {
        return res.data;   //Returns an array of objects
      })
      .catch((err) => {
        console.log("err");
      });
  }

它返回undefined。这是因为axios.get返回 aPromise并且您没有将其分配给任何东西，并且您的箭​​头函数隐式返回undefined，因为它没有显式return声明。

尝试这个：

const [data, setData] = useState([]);

useEffect(() => {
  axios.get("/custom/api/endpoint")
    .then((res) => {
      setData(res.data);
    })
    .catch((err) => {
      console.log("err");
    });
}, []);

这里useEffect是在组件的初始渲染之后调用的，它调用axios.get. 它是一个异步函数，因此useEffect调用会在调用后立即返回。当axios.get异步调用成功时，它会调用调用中的箭头函数then，将响应中的数据分配给data状态变量。

于 2021-05-22T20:40:47.993 回答
0

这些解决方案对我来说并不成功，因为我为项目构建了我的模式。我使用 redux 调度（所以 redux-thunk）的数据请求实际上我使用 redux-toolkit 进行快速开发。

我是这样解决的；

function Table ({ columns, data }) {
    // ...
    return /* standart react-table basic component */
}

function MyTable(props) {
  const columns = useMemo(() => props.columns, [props.columns]);
  const data = useMemo(() => props.data, [props.data]);

  return <Table columns={columns} data={data} />;
}

const PageListTable = () => {
    // ...
    const columns = [...]; // static variable

    useEffect(
      async () => {
        const payload = {};

        // some codes

        dispatch(getAllData(payload));
      },
      [activeId, isAuth] // listen from with useSelector
    );

    // some codes..

    return (
        {/* ..... */}

        <HOC.Async status={loading}>
            <MyTable
                columns={columns}
                data={getAllDataState.data}
            />
        </HOC.Async>

        {/* ..... */}
    );
}

我的 package.json 规格是这样的；

"react": "^17.0.2",
"react-redux": "^7.2.4",
"react-table": "^7.7.0",
"@reduxjs/toolkit": "^1.6.1",
于 2021-08-19T10:49:26.090 回答