Блог

У меня есть массив, и я хочу обновить ответы на вопросы в первом, а также в детях

Это основные данные

 import React, {useState} from 'react';

const data = [
    {
        name: "USA",
        questionsAnswers: [
            {id:1,name:"Validated"},
            {id:2,name:"Non Validate"},
            {id:3,name:"None"}
        ],
        children: [
            {
                name: "ALABAMA",
                questionsAnswers: [
                    {id:1,name:"Validated"},
                    {id:2,name:"Non Validate"},
                    {id:3,name:"None"}
                ],
            },
            {
                name: "FLORIDA",
                questionsAnswers: [
                    {id:1,name:"Validated"},
                    {id:2,name:"Non Validate"},
                    {id:3,name:"None"}
                ],
            }
        ]
    }
];


const DeData = () => {

    const [myData, setMyData] = useState(data);

    const handleInputChanges = (e, index) => {
        const {name, value} = e.target;
        const list = [...myData[0].questionsAnswers];
        list[index][name] = value;
         setMyData({...myData});
    };

    return (
               <>
            <ul>
                {myData[0].questionsAnswers?.map((item, index) => (
                    <input
                        className="InputStyle3"
                        style={{width: 400, height: 40, marginBottom: 13}}
                        onChange={(e) => handleInputChanges(e, index)}
                        type="text"
                        name="name"
                        value={item.name}
                    />
                ))}
            </ul>
            <ul>
                {myData[0].children?.map((item, index) => (
                    <>
                    <label>{item?.name}</label>
                {item?.questionsAnswers?.map((item, index) => (
                    <input
                    className="InputStyle3"
                    style={{width: 400, height: 40, marginBottom: 13}}
                    onChange={(e) => handleInputChanges(e, index)}
                    type="text"
                    name="name"
                    value={item.name}
                    />
                    ))}
                    </>
                ))}
            </ul>
        </>
    );
}

export default DeData;    


 

Я смог изменить его в первом вопросе с помощью приведенного выше кода

Я преобразую индекс во входное имя и слушаю изменения на входе

Но я изо всех сил пытаюсь изменить это в вопросе о детях

Онлайн-код : https://codesandbox.io/s/optimistic-lovelace-gwc4d?file=/src/App.js

Проблема в том, что вы пытаетесь повторно использовать изменения ввода как для родителей, так и для детей.

const list = [...myData[0].questionsAnswers]; в обработчике изменений вы всегда будете получать ответы на вопросы родителей, а не на вопросы детей. Потому что mydata-это ваша структура данных. Ваш обработчик дочерних изменений должен использовать myData[0].дочерние элементы и фильтр на основе названия состояний.