无法读取 useEffect 挂钩上未定义的属性“地图”答案

【问题标题】：Cannot read property 'map' of undefined on useEffect hook无法读取 useEffect 挂钩上未定义的属性“地图”
【发布时间】：2021-07-23 15:20:09
【问题描述】：

我最近开始学习 react 并陷入了上述错误。我知道这个错误有很多答案。是的，我已经看到了这些解决方案，但我无法将这些解决方案映射到我的问题。我在下面粘贴我的代码，请告诉我下面的代码有什么问题。很感谢任何形式的帮助。谢谢。

const orders = () => {

    const [stateValue, setState] = useState({
        orders: [],
        loading: true
    });

    // getting the orders
    useEffect(() => {
        axiosInstance.get('/orders.json').then(res => {
            transformData(res);
            setState({loading: false});
        }).catch(err => {
            console.log(err)
            setState({loading: false});
        })
    }, []);

    // transforming firebase response(objects of objects) into array of objects
    const transformData = (response) => {

        const ordersData = [];
        if(response.data) {
            for (let key in response.data) {
                ordersData.push({
                    ...response.data[key],
                    id: key
                })
            }
        }

        setState({orders: ordersData});
    }
    
    let orders;
    orders = stateValue.orders.map((order) => <Order //error line
                key={order.id}
                ingredients={order.ingredients} 
                email={order.email}
                price={order.price}
                />); 
        
    if(stateValue.loading) {
        orders = <Loading />
    }

    return(
        <div>
             {orders}
        </div>
       
    )
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

useState 钩子的 setter 函数 DOES NOT MERGE STATE 就像它的等效类 (it mentioned in the docs)：

但是，与类中的this.setState 不同，更新状态变量总是替换它而不是合并它。

// Merge with prev state in function component
setState(prev => ({...prev, loading: false}))

// In class component, the setter merges state by default
this.setState({loading: false});

【讨论】：