javascript - 在 react js 中使用 Context 和 hook

Question

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

分类状态.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 没有更新，我认为错误是存在的。

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

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

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

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

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

谢谢！！

标签： javascriptreactjsuse-statereact-context

Answer 1

您将 categorias 属性设置为对象，而不是数组

   setCategorias({ newData });

只是做一个setCategorias(newData)，我认为这应该工作