javascript - react 上下文奇怪的数据类型错误

Question

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

在这里，我创建了一个数组上下文，并尝试在子项掉落时更改它，但它给了我错误 类型错误: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;

Answer 1

您的代码中存在三个问题:

1. 直接使用 Array.push 改变状态
2. ContextType 不同。一个是 MyContext，另一个是 WebsiteContext。
3. 为 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);