在 React js 中使用 Context 和 hook

Question

是我吗... 3 小时前我有一个关于如何使用 context 和 usestate 在反应中的问题，但我自己找到了答案，但现在，我遇到了另一个麻烦，是关于 setState 或 setcategoria 的我的情况，所以这是组件：

CategoriaState.js

const [ categorias, setCategorias ] = useState(Data);

const AddCategoria = (description, idPadre) => {
    categorias.push({
        id: categorias.length,
        description: description,
        idPadre: idPadre
    });
    console.log(categorias);
    return true;
};

const DelCategoria = (id) => {
    const newData = categorias.filter( item => item.id !== id );  
    setCategorias({ newData });
    return true;
};

return(         
    <CategoriaContext.Provider
                value={{ 
                        categorias: categorias,
                        GetCategorias,
                        AddCategoria,
                        DelCategoria
                }}                 
    >
        {props.children}
    </CategoriaContext.Provider> 
)

函数 GetCategorias、Addcategorias 工作得很好！！！但问题出在 DelCategoria，这是错误：

Uncaught TypeError: categorias.map is not a function

因此，如果我在 setCategorias({ newData }) 行中进行通信；在函数DelCategoria中，没有显示错误，幸好变量categoria没有更新，我想错误就在那里。

所以我从我的组件中调用函数 DelCategoria AllCat.js

    .
    .
    .
    const { categorias, GetCategorias, DelCategoria }  = useContext( CategoriaContext );

    useEffect(() => {
        GetCategorias();
    },[])
   .
   .
   .

   <button onClick={ () => DelCategoria(item.id) } >
      Del Item                                    
    </button>

我的意图是使用上下文和 usestate 在 React js 中创建一个简单的示例，我想理解这个 api（使用上下文）

谢谢！！

Answer 1

您正在将类别属性设置为对象，而不是数组

   setCategorias({ newData });

改成 setCategorias(newData)，我认为这应该可行

在 React js 中使用 Context 和 hook

Using Context and hook in react js

javascript

reactjs

react-context

use-state