突变免费的:

// given a state
state = {items: [{name: 'Fred', value: 1}, {name: 'Wilma', value: 2}]}

// This will work without mutation as it clones the modified item in the map:
this.state.items
   .map(item => item.name === 'Fred' ? {...item, ...{value: 3}} : item)

this.setState(newItems)

使用handleChange上的事件找出已更改的元素，然后更新它。为此，您可能需要更改某些属性来标识它并更新它。

参见fiddle https://jsfiddle.net/69z2wepo/6164/

下面这段代码对我迟钝的大脑来说很轻松。删除对象并替换为更新后的对象

    var udpateditem = this.state.items.find(function(item) { 
                   return item.name == "field_1" });
    udpateditem.name= "New updated name"                       
    this.setState(prevState => ({                                   
    items:prevState.dl_name_template.filter(function(item) { 
                                    return item.name !== "field_1"}).concat(udpateditem)
    }));

你可以使用update immutability helper:

this.setState({
  items: update(this.state.items, {1: {name: {$set: 'updated field name'}}})
})

或者，如果您不关心是否能够使用===在shouldComponentUpdate()生命周期方法中检测该项的更改，那么您可以直接编辑状态并强制组件重新呈现—这实际上与@limelights的答案相同，因为它将对象拉出状态并编辑它。

this.state.items[1].name = 'updated field name'
this.forceUpdate()

后编之外:

请参阅react-training中的简单组件通信课程，了解如何将回调函数从持有状态的父组件传递给需要触发状态更改的子组件。

发现这令人惊讶地困难，没有一个ES6传播魔法似乎工作如预期。 正在使用这样的结构来获得用于布局目的的渲染元素属性。

在这个简化的例子中，使用immutability-helper中的update方法是最直接的:

constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

改编自https://github.com/kolodny/immutability-helper#computed-property-names

要更新的数组成员是一个嵌套更复杂的对象，使用适当的深度复制方法基于复杂性。

当然有更好的方法来处理布局参数，但这是关于如何处理数组。每个子元素的相关值也可以在它们之外计算，但我发现向下传递containerState更方便，因此它们的子元素可以随意获取属性并在给定的索引处更新父状态数组。

import React from 'react'
import update from 'immutability-helper'
import { ContainerElement } from './container.component.style.js'
import ChildComponent from './child-component'
export default class ContainerComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { values: [] }
    this.updateContainerState = this.updateContainerState.bind(this)
  }

  updateContainerState(index, value) {
    this.setState((state) => update(state, { values: { [index]: { $set: value } } }))
  }

  // ...

  render() {
    let index = 0
    return (
      <ContainerElement>
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      <ChildComponent
        index={index++}
        containerState={this.state}
        updateContainerState={this.updateContainerState}
      />
      </ContainerElement>
    )
  }
}

错误的方式!

handleChange = (e) => {
    const { items } = this.state;
    items[1].name = e.target.value;

    // update state
    this.setState({
        items,
    });
};

正如许多优秀的开发者在评论中指出的那样:改变状态是错误的!

我花了好长时间才想明白。上面的工作，但它带走了React的力量。例如，componentDidUpdate不会将其视为更新，因为它是直接修改的。

所以正确的方法应该是:

handleChange = (e) => {
    this.setState(prevState => ({
        items: {
            ...prevState.items,
            [prevState.items[1].name]: e.target.value,
        },
    }));
};