Javascript 设置状态时返回未定义的React上下文api

我最近开始学习react，我正在使用上下文api来存储我的全局状态

在MyProvider.js文件中，我定义了我的provider，它只存储2个json obj数组

import {MyContext} from "./MyContext";
import React, {useState} from "react";

export const MyProvider = (props) => {
    const intialState = {
        featuredListings: [],
        setFeaturedListings: (val) => setState({...state, featuredListings: val}),
        featuredVendors: [],
        setFeaturedVendors: (val) => setState({...state, featuredVendors: val})
    }

    const [state, setState] = useState(intialState)

    return (
        <MyContext.Provider
            value={state}
        >
            {props.children}
        </MyContext.Provider>
    );
}

为什么我设置state.featuredVendors时它没有更新

我还注意到另一件奇怪的事情是，如果我重新安排了通话顺序，即呼叫

---

getFeaturedListing首先后跟getFeaturedVendors，然后featuredVendors和FeaturedListing的仅我的状态更新将是一个空数组。

调用

useState

时，初始值仅设置一次。首次装入MyProvider时，将使用

setFeaturedListings

和

setFeaturedVendors

方法初始化状态，但只要

state

的值更改，这些方法都不会更新。因此，当分散值时，

state

的值将始终是其初始值

setState

也可以使用始终将当前值作为参数接收的函数调用，因此您可以重写这些方法以按如下方式传播该值：

    const intialState = {
        featuredListings: [],
        setFeaturedListings: (val) => setState(state => ({...state, featuredListings: val})),
        featuredVendors: [],
        setFeaturedVendors: (val) => setState(state => ({...state, featuredVendors: val}))
    }

或者，您也可以将这些函数移到您所在州之外

export const MyProvider = (props) => {
  const intialState = {
      featuredListings: [],
      featuredVendors: [],
  }
  const [state, setState] = useState(intialState)
  return (
      <MyContext.Provider
          value={{
            ...state,
            setFeaturedListings: (val) => setState({...state, featuredListings: val}),
            setFeaturedVendors: (val) => setState({...state, featuredVendors: val})
          }}
      >
          {props.children}
      </MyContext.Provider>
  );
}

export const MyProvider=（道具）=>{
常量初始状态={
功能列表：[]，
特性文件编号：[]，
}
常量[状态，设置状态]=使用状态（初始状态）
返回(
设置状态（{…状态，特征列表：val}），
setFeaturedVendors：（val）=>setState（{…状态，featuredVendors:val}）
}}
>
{props.children}
);
}

export const MyContext = React.createContext()

    const intialState = {
        featuredListings: [],
        setFeaturedListings: (val) => setState(state => ({...state, featuredListings: val})),
        featuredVendors: [],
        setFeaturedVendors: (val) => setState(state => ({...state, featuredVendors: val}))
    }

export const MyProvider = (props) => {
  const intialState = {
      featuredListings: [],
      featuredVendors: [],
  }
  const [state, setState] = useState(intialState)
  return (
      <MyContext.Provider
          value={{
            ...state,
            setFeaturedListings: (val) => setState({...state, featuredListings: val}),
            setFeaturedVendors: (val) => setState({...state, featuredVendors: val})
          }}
      >
          {props.children}
      </MyContext.Provider>
  );
}