[英]Using Context and hook in react js
是我再次... 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 }); 在function DelCategoria 中,没有显示错误,还好变量categoria 没有更新,我认为错误是有的。
所以我从我的组件 AllCat.js 中调用 de function DelCategoria
.
.
.
const { categorias, GetCategorias, DelCategoria } = useContext( CategoriaContext );
useEffect(() => {
GetCategorias();
},[])
.
.
.
<button onClick={ () => DelCategoria(item.id) } >
Del Item
</button>
我的意图是使用 context 和 usestate 在 react js 中创建一个简单的示例,我想了解这个 api(使用上下文)
谢谢!!
您将分类属性设置为 object,而不是数组
setCategorias({ newData });
只需制作一个setCategorias(newData)
,我认为这应该可行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.