使用 React 功能组件更新 Array 中 object 中的 属性

Question

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

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

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

在 parent 组件中，就像

  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 })
};

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

它没有更新 UI。是在输入字段中反映新编辑的文本的正确方式

Answer 1

• 确保从 EditSectionComponent 中的道具中解构 details。
• 在您的 parent 中，初始状态即 details 被定义为一个数组。它必须是 object.
• 此外，在执行 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}))
};