使用反应上下文时出错 - 无法解构属性

Question

我尝试在我的 React 应用程序上使用 Context 但我得到了错误：

Uncaught TypeError: Cannot destructure property 'selected' of 'Object(...)(...)' as it is undefined.

在我的InputsList 文件中 在这条线上：

const { selected, setSelected } = useContext(ParamsContext);

参数上下文：

import { createContext } from 'react';

export const ParamsContext = createContext({
    selected: [],
    setSelected: () => {},
    textName: null,
    valueName: null
});

输入参数：

    import React, { useState } from 'react';
import InputsList from './InputsList';
    import { ParamsContext } from './services/ParamsContext';
    
    function InputParams(props) {
        const [selected, setSelected] = useState([]);
        const textName = "test";
        const valueName = "test2";
    
    
        return (
            <div>
                <ParamsContext.Provider
                    selected={selected}
                    setSelected={setSelected}
                    textName={textName}
                    valueName={valueName}>
                    <InputsList />
                </ParamsContext.Provider>
            </div>
        );
    }
    export default InputParams;

输入列表：

    import React, { useContext } from 'react';
    import { ParamsContext } from './services/ParamsContext';
    
    function InputsList(props) {
        const { selected, setSelected } = useContext(ParamsContext);
        return (
            <div>
                {selected.length}
            </div>
        );
    }

export default InputsList;

我能做什么？

Answer 1

Contexte.Provider 接受

value

道具， 并且应该这样使用：

<ParamsContext.Provider value={{selected, setSelected, textName, valueName}}>
<\ParamsContext.Provider>

Answer 2

Provider 接受一个 value prop，在你的例子中，是一个对象。所以应该是：

<ParamsContext.Provider
  value={{
     selected,
     setSelected,
     textName,
     valueName
  }}
>
   <InputsList />
</ParamsContext.Provider>

查看文档

Answer 3

不是一个解决方案，但当我正要损坏笔记本电脑并把自己扔出窗外时，你的代码正好帮助了我，所以谢谢你