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

Question

我正在从node.js中获取数据。所以现在获取数据有点晚了..。我想这就是为什么我的控制台总是说'null‘:/我尝试了几种方法来修复它，但是它根本没有帮助。

我确实使用了UseState，但是它最后说的是'null‘数据。我的页面上一直说

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

这是我的反应代码：

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可以根据该数据正确地呈现项(针对您的情况)。

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

另一方面，您使用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>
  );
};