父组件包含一个对象数组。它映射到数组上,并为每个对象返回一个子组件,用该对象的信息填充它。在每个子组件中都有一个输入字段,我希望它能让用户更新对象,但我不知道如何进行更新。在钩子、道具和对象不变性之间,我在概念上迷失了方向。以下是父组件的简化版本:
const Parent = () => {
const [categories, setCategories] = useState([]);
useEffect(()=>{
// makes an axios call and triggers setCategories() with the response
}
return(
categories.map((element, index) => {
return(
<Child
key = {index}
id = {element.id}
firstName = {element.firstName}
lastName = {element.lastName}
setCategories = {setCategories}
})
)
}
下面是子组件的简化版本:
const Child = (props) => {
return(
<h1>{props.firstName}</h1>
<input
defaultValue = {props.lastName}
onChange={()=>{
// This is what I need help with.
// I'm a new developer and I don't even know where to start.
// I need this to update the object's lastName property in the parent's array.
}}
)
}
也许在不知情的情况下,提升了状态:基本上,不是在Child
组件中具有状态,而是将其保持在Parent
中
这是一个使用过的模式,没有错:您只是错过了一个允许子级更新Parent
状态的句柄函数:为了做到这一点,您需要在Parent
组件上实现一个handleChange
,然后将其作为道具传递给每个Child
。
看看这个代码示例:
const Parent = () => {
const [categories, setCategories] = useState([]);
useEffect(() => {
// Making your AXIOS request.
}, []);
const handleChange = (index, property, value) => {
const newCategories = [...categories];
newCategories[index][property] = value;
setCategories(newCategories);
}
return categories.map((c, i) => {
return (
<Child
key={i}
categoryIndex={i}
firstName={c.firstName}
lastName={c.lastName}
handleChange={handleChange} />
);
});
}
const Child = (props) => {
...
const onInputChange = (e) => {
props.handleChange(props.categoryIndex, e.target.name, e.target.value);
}
return (
...
<input name={'firstName'} value={props.firstName} onChange={onInputChange} />
<input name={'lastName'} value={props.lastName} onChange={onInputChange} />
);
}
你可能不知道的几件事:
- 通过为
input
使用属性name
,您可以为所有input
元素只使用一个处理程序函数。在函数内部,在本例中为onInputChange
,您可以使用e.target.name
检索该信息 - 请注意,我在
useEffect
中添加了一个空数组dependencies:如果没有它,useEffect
将在每次渲染时运行。我认为这不是你想要的
相反,我很抱歉,您只想在装载组件时执行请求,这可以通过n个空数组依赖项来实现