无法读取未定义的属性'map' on useEffect hook

Question

我最近开始学习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>
       
    )
}

Answer 1

useState hook的setter函数DOES NOT MERGE STATE就像在它的类等效(它在文档中提到):

但是，与类中的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});