使用 React 功能组件更新 Array 中对象的属性答案

【问题标题】：To update a property in object in Array with React functional component使用 React 功能组件更新 Array 中对象的属性
【发布时间】：2020-07-27 23:21:45
【问题描述】：

我有一个写在子组件中的输入字段及其内部返回函数

const EditSectionComponent = ({
    editCaption,
    editName,
}) => {
    const {name,caption} = details;

    return (
        <input
        type="text"
        className="imageNameDetails"
        value={name}
        onChange={e => editName(e.target)}
        />  
    )
}

在父组件中，就像

  const onEditClick = id => {
    const selectedAsset = All.find(i => i.id === id);
    setDetails(selectedAsset);
}

const [details, setDetails] = useState([]);

const editName = target => {
    setDetails({ ...details, [name]: target.value })
};

初始页面加载我可以在文本字段中看到标题和名称，但我无法更改其值

它不会更新用户界面。在输入字段中反映新编辑的文本是否正确

【问题讨论】：

您需要将editName函数传递给子组件，子组件可以使用editName函数更新父状态，然后传回子组件
@Colin 我愿意。一切如你所说。只是没有发布问题
也许 setDetails({ ...details, name: target.value }) ?
如果您发布了有效的代码，会更容易提供帮助。你是如何传递这些道具的？ 'details' 在您的示例中未定义。
@BEVR1337 我分享了 onEditClickLink 函数，它确实设置了 setDetails 状态

标签： javascript reactjs react-hooks react-functional-component

【解决方案1】：

确保从EditSectionComponent 中的道具中解构details。
在您的父级中，初始状态（即details）被定义为一个数组。它必须是一个对象。
同样在执行setDetails 时，您需要指定密钥。（在您的情况下不是动态名称）

更新代码在这里：

const EditSectionComponent = ({
    editCaption,
    editName,
    details,
}) => {
    const {name,caption} = details;

    return (
        <input
        type="text"
        className="imageNameDetails"
        value={name}
        onChange={e => editName(e.target)}
        />  
    )
}


const [details, setDetails] = useState({name: '', caption: ''});

const editName = target => {
    setDetails(prev => ({...prev, name: target.value}))
};

【讨论】：