React Hooks createContext：当它是数组时如何更新 UserContext？

Question

我的 UserContext 组件中有状态：

var initialState = {
  avatar: '/static/uploads/profile-avatars/placeholder.jpg',
  markers: []
};

var UserContext = React.createContext();

function setLocalStorage(key, value) {
  try {
    window.localStorage.setItem(key, JSON.stringify(value));
  } catch (errors) {
    // catch possible errors:
    console.log(errors);
  }
}

function getLocalStorage(key, initialValue) {
  try {
    const value = window.localStorage.getItem(key);
    return value ? JSON.parse(value) : initialValue;
  } catch (e) {
    // if error, return initial value
    return initialValue;
  }
}

function UserProvider({ children }) {
  const [user, setUser] = useState(() => getLocalStorage('user', initialState));
  const [isAvatarUploading, setIsAvatarUploading] = useState(true);

并返回一个更新数组的函数：

  return (
    <UserContext.Provider
      value={{
        userMarkers: user.markers,
        setUserMarkers: markers => setUser({ ...user, markers }),
      }}
    >
      {children}
    </UserContext.Provider>
  );

在我的消费函数中，我试图使用该函数来添加一个对象到初始数组，即标记。

export default function MyMap() {
  var { userMarkers, setUserMarkers } = useContext(UserContext);

假设上面有一个操作改变了这个值：

setUserMarkers({"id":1,"lat":40.73977053760343,"lng":-73.55357676744462});

发生的事情是旧对象被完全覆盖。所以数组会更新为一个新对象。未添加。请帮忙。我也试过 concat 但它没有用？

setUserMarkers: markers => setUser(()=> user.markers.concat(markers)),

所以标记应该是：

  markers: [{"id":0,"lat":40.73977033730345,"lng":-66.55357676744462},{"id":1,"lat":40.73977053760343,"lng":-73.55357676744462}]

Answer 1

像这样调用您的函数以获取先前的值并附加到它。

setUserMarkers([...userMarkers, {"id":1,"lat":40.73977053760343,"lng":-73.55357676744462}])

如果您永远不需要覆盖其中的值，您还可以将函数调用更新为始终追加。然后你可以用新值调用它。

setUserMarkers: markers => setUser({ ...user, markers: [...user.markers, markers] }),

React Hooks createContext：当它是数组时如何更新 UserContext？

React Hooks createContext: How to update UserContext when its an array?

reactjs

react-context

react-hooks