如何使用来自节点 api 的异步数据？

Question

我正在从 node.js 获取数据。 所以现在获取数据有点晚了...... 我想这就是为什么我的控制台一直显示“null”的原因：/ 我尝试了几种方法来修复它，但它根本没有帮助。

我确实使用了 UseState，但它最终说的是“空”数据。我的页面一直在说

TypeError: 无法读取 null 的属性“地图”

这是我的反应代码：

const Start = () => {
  const [isLoading, setIsLoading] = useState(false);

  const dataList = null;

  useEffect(() => {
    const getData = async () => {
      setIsLoading(true);
      await axios
        .post('/api/getData')
        .then((res) => {
          console.log(res.data.result);
          // ???? at this point, this console.log says what I exactly want.
          return (dataList = res.data.result);
        })
        .catch((err) => console.log(err));
      setIsLoading(false);
    };

    getData();
  }, []);

  if (isLoading) return <div>...Loading...</div>;

  return (
    <div>
            
      {dataList.map((item, idx) => (
        <p>{item[0].dataName}</p>
      ))}
          
    </div>
  );
};

我应该怎么做才能使用从 node.js 获取的数据？ 数据很长，很大的 JSON。

Answer 1

要正确使用 React，您应该将数据保存在状态中，以便 React 的虚拟 DOM 可以根据该数据正确呈现项目（针对您的情况）。

另外，在使用await 时无需链接.then。

另一方面，您使用axios.post 而不是axios.get 来获取数据很奇怪，这只是一个友好的建议。

const dataList = null 永远不会更新的原因是因为您在渲染函数中对其进行了初始化，这意味着每次状态更新 (setIsLoading) 您的 dataList 都会重新初始化为 null

const Start = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    const getData = async () => {
      setIsLoading(true);

      const response = await axios.post('/api/getData');

      setIsLoading(false);
      setDataList(response.data.result);
    };

    getData();
  }, []);

  if (isLoading) {
    return <div>...Loading...</div>;
  }

  return (
    <div>
      {dataList.map((item, idx) => (
        <p>{item[0].dataName}</p>
      ))}
    </div>
  );
};