Невозможно обновить вложенный объект в состоянии

Question

import React, { Component } from 'react';
import ColorBox from './ColorBox'
import './ColorBoxes.css'

class ColorBoxes extends Component {
    state = { 
        colors: {}
    }

    clickedColor = (color) => {
        let newColor = this.randomColorGenerator()
        if (color !== newColor) {
            console.log('i am changing state', newColor)
            console.log(color, 'i am current color')
            console.log(this.state.colors)

            const {colors} = this.state
            this.setState({
                colors: {
                    ...colors,
                    [color]: newColor
                }
            })
        }

    }

    randomColorGenerator = () => {
        let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16)
        return randomColor
    }

    renderColors = () => {
        let colors = []
        colors = Object.keys(this.state.colors)
        return colors.map(c => 
        <div key={c}><ColorBox color={c} clickedColor={this.clickedColor}/></div>)
    }

    componentDidMount() {
        let colorKey
        let colors = {}
        for(let i=0; i < 21; i++) {
            colorKey = this.randomColorGenerator()
            colors[colorKey] = colorKey

        }
        this.setState({ colors: colors  });
    }
    render() { 

        return ( 
            <div className="ColorBoxes">
                {this.renderColors()}
            </div>
        );
    }
}
export default ColorBoxes;

Дочерний компонент

import React from 'react';
import './ColorBox.css'

const ColorBox = (props) => {
    return <div className='ColorBox' 
    style={{backgroundColor: `${props.color}`}}
    onClick={() => props.clickedColor(props.color)}>
        {props.color}
    </div>
}

export default ColorBox;

редактировать, я пробовал предложенные решения, однако состояние обновляется, основываясь на инструментах реагирования разработчика, но компоненты не рендеринг. Я подозреваю, что ключ также должен быть изменен для повторного рендеринга, но я не знаю, как это сделать в состоянии. Я хотел бы взять старый ключ и заменить его тем же цветом, который обновляется.

У меня есть этот объект цветов в состоянии, он содержит пары цветов: значение, например цвета: {#fff: #fff, #bbb: #bbb}. Я передаю функцию дочернему компоненту, чтобы при нажатии на цвет он возвращал тот цвет, который является моим ключом в объекте состояния, я хочу затем найти этот ключ и обновить значение этого ключа до нового случайного цвета, который будет выбран. Я не могу получить доступ к этому ключу. Как я могу это сделать? В идеале я хотел бы удалить этот ключ и обновить ключ и значение, чтобы они были одинаковыми в моем объекте состояния.

Answer 1

Вам не хватает скобок для color. Вам нужны квадратные скобки, чтобы установить динамический ключ c на объекте:

this.setState(prevState => ({  
  ...prevState.colors,
  [color]: newColor,                    
}));

Надеюсь, это поможет!

Answer 2

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

colors: {
  #fff: '#fff',
  #000: '#000'
}

, затем просто обновите ваш setState до

const {colors} = this.state
setState({
  colors: {
    ...colors,
    [color]: newColor
  }
})

проблема была в том, что вы добавляли свое новое состояние цветов вне цветов объект

Answer 3

Вы можете сделать это следующим образом:

class ColorBoxes extends Component {
    state = { 
        colors: {}
    }

    clickedColor = (color) => {
        let newColor = this.randomColorGenerator()
        if (color !== newColor) {
            console.log('i am changing state', newColor)
            console.log(color)
            console.log(this.state.colors.color)
            let newColors = {...this.state.colors};
            newColors.color = newColor;
            this.setState({ colors: newColors })
       }
    }