Реакция ловушек: как мне обновить состояние вложенного объекта с помощью useState ()?

Question

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

const styles = {
    font: {
        size: {
            value: '22',
            unit: 'px'
        },
        weight: 'bold',
        color: '#663300',
        family: 'arial',
        align: 'center'
    }
};

Я пытаюсь обновить свойство align, но когда я пытаюсь обновить объект, я заменяю весь объект только свойством align.

вот как я его обновляю:

const { ...styling } = styles;
const [style, setStyle] = useState(styling);

return (
        <RadioButtonGroup
            onChange={(event) => {
                setStyle({ ...style, font: { align: event.target.value } });
                console.log(style);
            }}
        />);

Когда я console.log style Я просто получаю {"font":{"align":"left"}} назад. Я ожидал увидеть весь объект с обновленным значением для align. Я новичок в деструктурировании, так что я тут делаю не так?

Answer 1

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

 <RadioButtonGroup
        onChange={(event) => {
            setStyle(prevStyle => ({ ...prevStyle, font: { ...prevStyle.font, align: event.target.value } }));
            console.log(style);
        }}
    />);

Answer 2

вы можете обновить стили таким образом

onChange={(event) => {
    const s = {...styles};
    s.font.align = event.target.value;
    setStyle(s);
    console.log(style);
}}

Answer 3

Первое: const { ...styling } = styles; - это то же самое, что и const styling = styles;

Но вы можете вообще пропустить это, просто используйте [...] = useState(styles)

setStyle(), чтобы принять функцию, которая получает токГосударство, в вашем случае стиль.Таким образом, вы можете использовать оператор распространения ... для создания нового объекта и добавления к нему значений.

setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );

Выше код использует функцию Arrow, это также можно записать как обычную функцию, но, вероятно, легче понять:

setStyle( function (style) {
    return  {
        ...style,
        font: {
            ...style.font,
            align: 'center'
        }
    }
});

Ваш console.log в setStyle отображает текущий стиль, так как измененный стиль будет виден при следующем рендере.Поэтому я передвинул console.log перед возвратом.

const [style, setStyle] = useState(styles);

console.log(style);

return (
        <RadioButtonGroup
            onChange={(event) => {
                setStyle(style => ({ ...style, font: { ...style.font, align: event.target.value } ) ) );
            }}
        />);

Вот несколько ссылок, которые помогут вам понять все это:

• Оператор спреда: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
• useState hook: https://reactjs.org/docs/hooks-state.html
• Функции стрелок: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 4

Это ваша ошибка

setStyle({
    ...style,
    font: { align: event.target.value } // This code replace the font object
});

Чтобы сохранить все font значения объекта, вы можете сделать это

const onChange = (event) => {
    const s = {...style};
    s.font.align = event.target.value;
    setStyle(s);
}

Или

const onChange = (event) => {
    setStyle({ 
        ...style,
        font: {
            ...style.font, // Spread the font object to preserve all values
            align: event.target.value
        }
    });
}

Answer 5

Ваш код для использования по умолчанию useState недействителен. Вы должны написать как ниже для useState по умолчанию:

  const { ...styling } = styles;
  const [style, setStyle] = useState({ styling }); // styling should be use in {}

return (
        <RadioButtonGroup
          onChange={event => {
            setStyle({
              ...styling,
              font: { ...styling.font, align: event.target.value }
            });
            console.log(style);
          }}
        />);

Демо-версия: проверьте это демо с console.log.