Question

你好，我有一个带孩子的家庭对象，我想更新孩子的名字

const [family, setFamily] = useState({lastName: "Doe", children:[{name: "Mary"]}, {name: "Jane"]})

然后我做

family.children.map((c, i) => <input name="name" key={i} onChange={(e) => updateChildren(e)} />)

const updateChildren = (event) => {
    let value = event.target.value;

    setFamily((prevState) => {
        return {
            ...prevState,
            children: //I think here´s the problem not sure how to target the children,
        };
    });
};

谢谢！

Answer 1

添加到updateChildren函数index属性中以了解要更新的那个：

family.children.map((c, i) => <input name="name" key={i} onChange={(e,i) =>.   
updateChildren(e, i)} />)

const updateChildren = (event, index) => {

let myFamily = Object.assign({}, family);
const currentChild = myFamily[children[index]];
currentChild.name = event.target.value;

setFamily((prevState) => ({
        ...prevState,
        ...myFamily: 
    });
});

};

Answer 2

应该会像这样

 const updateChildren = ({ target }) => {
    setFamily(({ lastName, children }) => {
      children = [...children, { name: target.value }];
      return { lastName, children }; // updates the children
    });
  };

选中代码和框进行演示。

https://codesandbox.io/s/nervous-snyder-s4cyn?file=/src/App.js

如何使用useState更新数组元素

2 个答案: