反应上下文奇怪的数据类型错误答案

【问题标题】：react context weird data type errors反应上下文奇怪的数据类型错误
【发布时间】：2021-10-18 02:53:45
【问题描述】：

我一直在尝试了解反应上下文以及如何从子组件更改它，但我不断收到奇怪的错误

在这里，我创建了一个数组上下文，并尝试在从子项丢弃的项目上更改它，但它给了我错误 TypeError: context.push 不是函数

import { React, createContext, useContext } from "react";
import { useState } from "react";

import { useDrag, useDrop } from "react-dnd";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

function WebsiteBody(props) {
  const [context, add_to_context] = useContext(WebsiteContext);

  const [{ droppedItem, didDrop, isOver, canDrop }, drop] = useDrop(() => ({
    accept: "card",
    drop: () => ({
      name: "body",
    }),
    collect: (monitor) => ({
      droppedItem: monitor.getItem(),
      didDrop: monitor.didDrop(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  }));
 
  if (didDrop) {
    add_to_context(droppedItem.item);
  }

  return (
    <div
      ref={drop}
      w="100vw"
      h="100vh"
      backgroundColor="yellow"
      display="flex"
    >
      
      {dropped_items.map((item) => item.name)}
    </Box>
  );
}

const MyContext = createContext([]);

function App(props) {
  const [context, setContext] = useState([]);

  function add_item(item) {
    setContext(context.push(item));

  }

  return (
      <DndProvider backend={HTML5Backend}>
        <MyContext.Provider value={[context, add_item]}>
          <WebsiteBody></WebsiteBody>
        </MyContext.Provider>
      </DndProvider>
  );
}

export default App;

【问题讨论】：

你能在你的问题中添加错误的堆栈跟踪吗？
context是一个只读变量，如果你尝试修改它是不行的，试试[...context, item]而不是context.push(item)

标签： javascript reactjs react-context react-dnd

【解决方案1】：

你的代码存在三个问题：

直接使用Array.push 改变状态
ContextTypes 不同。一个是MyContext，另一个是WebsiteContext。
为createContext 提供的默认值无效

修改代码如下：

WebsiteContext.js

export default React.createContext([
  [],  // default value for context value 
  () => {} // default value for addItem
]);

App.js

import WebsiteContext from './WebsiteContext';

const [context, setContext] = useContext([]);

const addItem = (item) => {
  setContext(old => [...old, item]);
};

<WebsiteContext.Provider value={[context, addItem]}>
</WebsiteContext.Provider>

WebsiteBody.js

import WebsiteContext from './WebsiteContext';

const [context, add_to_context] = useContext(WebsiteContext);

【讨论】：