JZTXT

开发手记-前端发送请求返回数据为空

发布时间 2023-04-12 15:34:52作者: YaosGHC

问题描述

发送请求获取到数据并传递给组件，但是组件第一次获取到的数据为空导致报错

猜测可能的原因

  1. react有一个机制会导致两次渲染
  2. axios异步请求，在没有去的结果前就返回

解决组件首次渲染时，数据还未到达，导致错误的情况

这边又分两种情况

  1. 组件自己发送请求获取数据
    可以在组件中使用 useState 来初始化数据，然后在 useEffect 中发送请求获取数据，并将数据更新到组件状态中
    这样，组件首次渲染时就可以使用初始化的数据，而当请求返回数据后，组件会重新渲染并更新数据
    加载动画在组件的渲染方法中，我们首先判断 data 是否为空，如果为空则显示 Loading...，否则将数据渲染到页面上。

重点在于1. 首先数据会有一个初始化值，不会报空错误，2. 数据更新后会重新渲染

  1. 数据并不是组件自己请求的，而是父组件提供的，解决办法也有两个

  2. 使用 props 来获取父组件传递的数据，然后在子组件内部使用 && 运算符来做条件判断。如果数据为空，则不渲染相应的子组件，避免报错

  3. 也可以使用 useEffect 钩子函数来实现。在 useEffect 中监听父组件传递的数据变化，并在数据更新后重新渲染子组件。

function MyComponent(props) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const result = await axios.get('api/data');
      setData(result.data);
    }

    fetchData();
  }, [props.data]);

  return (
    <div>
      {data && <p>{data.title}</p>}
    </div>
  );
}