在 React 中更新嵌套数组中的嵌套对象

Question

预期效果：

• 单击按钮 -> 调用函数save-> 将对象传递p给函数update

• 更新{a: 'purple', desc: 'grt', date: '12 -10-2019 '}颜色数组中的第二个对象，它在products数组中

更新前： {a: 'purple', desc: 'grt', date: '12 -10-2019 '}

更新后： {a: 'violet', desc: 'gt', date: '12 -12-1980 '}

console.log 中的错误：

Uncaught TypeError: this.props.product.colors.map is not a function

应用程序

class App extends Component {

  constructor (props) {

    super(props);

    this.state = {

      products: [  

            {

                colors: [{a:'orange', desc: 'grtrt',  date: '02-12-2019'}, {a:'purple', desc: 'grt',  date: '12-10-2019'}]

                desc: 'gfgfg',

            },

            {

                colors: [{a:'black', desc: 'g',  date: '12-12-2019'},  {a: 'white', {a:'black', desc: 'grtrt',  date: '12-12-2119'}, }, {a:'gray', desc:'', date: '01-01-2000'}],

                desc: 'gfgfgfg',

            }

        ],

        selectProductIndex: 0 //It is first object in products array

        index: 1  //It is second object in colors array

    }

  }

  update = (item) => {

    const {selectProductIndex} = this.state;

    this.setState(prevState => {

      return {

        products: [

          ...prevState.products.slice(0, selectProductIndex),

          Object.assign({}, prevState.products[selectProductIndex], {colors: item}),

          ...prevState.products.slice(selectProductIndex + 1)

        ]

      };

    });

  }

  render () {

    return (

        <div>

          <Items

            product={this.state.products[this.state.selectProductIndex]} 

            update = {this.update}

          /> 

        </div>

    )

  }