如何将JavaScript中API调用的返回值传递给React组件

• 封装的ordersData函数无返回值，同时内部的fetch是异步操作，同步调用时无法拿到回调中处理完成的数据，函数执行默认返回undefined
• React组件中对setPayload的使用方式错误，setPayload是useState返回的状态更新函数，必须以setPayload(新值)的形式调用，不能直接用=赋值覆盖

1. 重写API封装函数 #

将ordersData改为异步函数，把处理完成的结果返回，同时向外抛出错误供调用方处理：

export async function ordersData() {
    const partner_code = localStorage.getItem('partner_code')
    let data = []
    try {
        const res = await fetch('xxxxxxxxxxxx' + process.env.REACT_API)
        const result = await res.json()
        for (let instance in result['docs']) {
            let payload = result['docs'][instance]
            payload.id = instance
            payload.timestamp = shortMonthYear(payload.timestamp)
            data.push(payload)
        }
        return data.reverse()
    } catch (err) {
        throw err
    }
}

2. 修正React组件内的调用逻辑 #

在useEffect中处理异步请求，拿到返回结果后调用状态更新函数更新组件状态：

export default function OrdersChart() {
    const [payload, setPayload]  = useState([])
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);

    useEffect(() => {
        const getOrderData = async () => {
            try {
                const orderRes = await ordersData()
                setPayload(orderRes)
                setIsLoaded(true)
                console.log(orderRes)
            } catch (err) {
                setError(err)
                setIsLoaded(true)
            }
        }
        getOrderData()
    }, [])
    // 其余组件代码省略
}

修改后ordersData返回的是Promise实例，请求完成后会把处理好的数组传递到调用方，组件中拿到结果后调用状态更新方法，即可将数据存入组件状态，供后续渲染逻辑使用。

内容的提问来源于stack exchange，提问作者lungu