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

Posted 2023-04-14

【中文标题】反应上下文奇怪的数据类型错误

【英文标题】：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)

【参考方案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);