Чтобы обновить свойство в объекте в массиве с функциональным компонентом React

Question

У меня есть поле ввода, которое написано в дочернем компоненте и его внутренней возвращаемой функции

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

Начальная загрузка страницы, я могу увидеть заголовок и имя в текстовом поле, но я не могу изменить его значение

Это не обновляет пользовательский интерфейс. Это правильный способ отразить вновь отредактированный текст в поле ввода

Answer 1

• Обязательно деструктурируйте details из реквизита в EditSectionComponent.
• У вашего родителя начальное состояние, т.е. details, определяется как массив. Это должен быть объект.
• Также при выполнении setDetails вам необходимо указать ключ. (в вашем случае это не имя c *)

Обновленный код здесь:

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