React中TypeError: Cannot read properties of undefined (reading 'split')原因解析

问题代码 #

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

const getQuotationById = async () => {
    const resp = await axios.get(`${process.env.REACT_APP_API_URL}quotation-details/${id}`);
    setData(resp.data);
};

useEffect(() => {
    getData().catch((e) => {
        console.log('error');
        console.log(e);
    });
}, []);

return (
    <div>
        {data.quantities.split('/').map((quantity, index) => (<span>quantity</span>))}
    </div>
);

运行时抛出错误：TypeError: Cannot read properties of undefined (reading 'split')，但将代码改为data.quantities?.split('/')后错误消失，原因如下：

• 初始状态不匹配：你把data的初始值设为[]（空数组），但API返回的是带有quantities字段的对象。组件首次渲染时，API请求还未完成，data仍是空数组，空数组没有quantities属性，所以data.quantities为undefined，调用split()自然触发报错。

• API请求是异步执行的：useEffect中的API请求属于异步操作，组件会先完成初始渲染，等请求成功返回后才会调用setData更新状态并触发重渲染。在初始渲染到请求完成的这段间隙，data保持初始的空数组状态，访问data.quantities必然得到undefined。

• 可选链操作符?.的防护作用：?.的逻辑是先判断左侧值是否为null或undefined，如果是则直接返回undefined，不会执行后续的split()方法，从根源上避免了报错。等API请求完成，data更新为包含quantities的对象后，data.quantities?.split('/')就会正常执行拆分操作。

另外注意：代码中存在笔误——useEffect里调用的getData()应该是getQuotationById()，否则会因函数未定义触发额外错误。

内容的提问来源于stack exchange，提问作者CHIU TZE CHEUNG