React - обновить объект в состоянии

Мне нужно обновить объект в состоянии, но только некоторые его элементы. Итак, если у него 7 элементов, а у моего нового объекта 4, эти 4 должны заменить существующие, а остальные должны быть сохранены.

Вот пример компонента, который выводит текущие ключи и значения объекта в состоянии. Когда вы нажимаете кнопку, объект должен получить новые значения некоторых свойств. Сейчас он перезаписывает объект четырьмя элементами, поэтому мне нужно его изменить. См. Метод handleClick.

В моем реальном проекте объект находится внутри состояния redux, но я думаю, решение будет таким же. Я получаю новые свойства из опубликованной формы, поэтому у меня есть объект, подобный приведенному ниже, с именем «update».

import React, { Component } from 'react'; 
import Button from 'material-ui-next/Button';
import Menu, { MenuItem } from 'material-ui-next/Menu';

class UpdateObject extends Component {

    constructor(props) {
        super(props)

         this.state = {

            theObject : {

                token: '478478478478',
                firstName: 'Goofy',
                lastName: 'Hello',
                age: '14',
                sex: 'female',
                employed: true,
                favoriteColor: 'Blue',
                bio: 'details of bio',
                }
        };
        this.handleClick = this.handleClick.bind(this);
    }


  handleClick(){

      let update = {
            age: '40',
            lastName: 'Newname',
            employed: true,
            favoriteColor: 'Yellow',
      }

    let change = Object.assign({}, this.state.theObject);
        change = update;

        this.setState({ theObject: change });

  }

 render() {
    const myObj = this.state.theObject;

        return (

            <div className = "updateobjectwrapper bl">
    <div> Here is the current object: <br />

        <ul> 
        { Object.entries(myObj).map(([ key,value ] ) => {

            return (
                   <li key = {key}>{key} : {value} </li>
                 )
            })     
        }
        </ul>

        </div> 
            <Button  
              onClick = {this.handleClick}
            >
              Update Object
            </Button>
        </div>
    ) 

 }


}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете передать несколько аргументов методу Object.assign, и он объединит их все.

handleClick(){
    let update = {
            age: '40',
            lastName: 'Newname',
            employed: true,
            favoriteColor: 'Yellow',
    }

    let change = Object.assign({}, this.state.theObject, update);

    this.setState({ theObject: change });
}

Другие вопросы по теме