Как обработать список инпутов?

Question

[mrrangerr]

Всем привет, у меня есть массив объектов, внутри объектов есть еще один массив объектов, на основе этого массива вывожу список инпутов. Теперь как мне сделать обработчики события для каждого инпута чтобы на бэк отправить в таком же виде какими они мне прилетели, только с новыми значениями

const renderAllConditionsProperties = () => {
        return conditions && conditions.map((a: any) => {
            return a.conditionProperties.map((item: any) => {
                return (
                    <div>
                        <span>{item.propertyDescription}: </span>
                        <Input
                            style={{
                                border: '1px solid #0079E9',
                                width: '10%',
                                boxSizing: 'border-box',
                                height: '33px',
                                borderRadius: '10px',
                                marginTop: '50px'
                            }}
                            key={item.conditionProperyId}
                            value={item.propertyValue}
                            // onChange={(e) => setTest((prevState) => prevState.find((c) => c[propertyName] === item.propertyName))}
                        />
                    </div>
                )
            })
        })
    }

Вот модель данных
"conditions": [
{
"conditionId": 0,
"conditionName": "string",
"conditionDescription": "string",
"conditionProperties": [
{
"conditionPropertyId": 0,
"propertyName": "string",
"propertyDescription": "string",
"propertyValue": "string",
"propertyElementType": "string"
}
]
}
],

Answer 1

[Валерий]

Можете воспользоваться библиоткеой Immer
пример

!!!очень плохо так делать, но вам важен порядок, поэтому нормализовать "нельзя"

onChange={(e) =>
            setTest(
              produce((draft) => {
                draft.conditions.forEach((c) =>
                  c.conditionProperties.forEach((prop) => {
                    if (prop.propertyName === item.propertyName) {
                        prop.propertyValue = e.target.value;
                    }
                  })
                );
              })
            )
          }

P.S Советую почитать про нормализацию данных

Comments

[mrrangerr]

Не работает чет(

[Валерий]

Вы Immer установили и импортировали produce ф-цию?

[mrrangerr]

Валерий, конечно

[Валерий]

А, я понял. Замените draft.conditions.forEach(...) на draft.forEach()

[mrrangerr]

Валерий, c.conditionProperties.forEach здесь кидает ошибку Cannot read property 'forEach' of undefined

[Валерий]

Я не понимаю, какя структура стейта:
так:

state = {
 conditions: [...]
}

или так:
state = [...] // массив conditions

[mrrangerr]

Валерий,
const [conditions, setConditions] = useState([])
const [test, setTest] = useState([])

///////

запрос с бэкка
useEffect(() => {
dispatch(loadPromotionById(id))
}, [id])

useEffect(() => {
setConditions(promotion.conditions)
}, [promotion])

useEffect(() => {
promotion.conditions && promotion.conditions.map((item) => item.conditionProperties.map((item) => setTest((prevState) => [...prevState, {propertyName: item.propertyValue}])))
}, [promotion])

[mrrangerr]

Валерий, Валерий, спасибо вам большое! С утра со свежей головой попробовал как вы советовали и все получилось!