Динамическое добавление значений внутри useState в ReactJS
У меня есть код ниже, где я жестко кодирую поле1, поле2, поле3. У меня есть массив полей
откуда я хочу создать этот объект внутри useState. Возможно ли это сделать?
const listOfFields = ['field1','field2','field3'];
const [all, setAll] = useState({
field1: true,
field2: true,
field3: true
});
Я хочу useState взять поле1, поле2, поле3 из списка полей, чтобы, если в списке полей есть дополнительные поля, такие как поле4, useState использовало его автоматически.
Можно ли динамически генерировать объект внутри useState с помощью listOfFields?
Ответы 3
Я не уверен в том, чего вы хотите достичь. Проверьте, работает ли этот код у вас:
const listOfFields = ['field1', 'field2', 'field3'];
const initialState = listOfFields.reduce((acc, field) => {
acc[field] = true;
return acc;
}, {});
const [all, setAll] = useState(initialState);
const listOfFields = ['field1','field2','field3'];
const obj = {}
listOfFields.forEach(field => { obj[field] = true })
const [all, setAll] = useState(obj);
Да, все, что вам нужно сделать, это удалить текущий объект с тремя свойствами и добавить в него объект с четырьмя свойствами.
Пример:
setAll({ field1: true, field2: true, field3: true, field4: true }]
Теперь обновление состояния запускает повторную отрисовку вашего пользовательского интерфейса, чтобы отразить его последнее значение.
Имейте в виду, что React не отслеживает изменения, если вы напрямую изменяете массив, даже если он передается по ссылке. Чтобы React распознал, что вы внесли изменение в свое состояние с помощью функции установки, вам необходимо явно вызвать функцию установки.
Более того:
Если вам нужен механизм для привязки определенного массива listOfFields к этому состоянию, вы можете воспользоваться перехватчиком useEffect, map перенеся массив в свой объект и установив состояние. определяемый вами массив либо должен быть передан в качестве реквизита компоненту, либо иметь его как само состояние.
Если вы передаете массив как реквизит при каждом изменении реквизита, это запускает повторный рендеринг вашего компонента.
ИЛИ
Если вы сделаете сам listOfFields состоянием, то всякий раз, когда состояние изменяется, компонент перерисовывается и принимает свое последнее значение.
Вам нужно использовать один из методов, чтобы сообщить React о внесении изменений в ваш объект.
Пример кода:
useEffect(() => {
const listOfMappedObject = listOfFields.map(field => ({ [field]: true }));
//set the state
allState(listOfMappedObject)
}, [listOfFields])
// Whenever listOfFields changes function inside this hook runs.
// You have to pass this listOfFields either as props or a state itself for react to know that you have made a change to this list.
Непонятно, о чем вы спрашиваете. Хотите добавить
field4на каком-нибудь более позднем мероприятии в состояние? В этом случае вы можете использовать функциюsetAll, т.е.setAll(o => ({ ...o, field4: true }))