首先获取您想要的项目，更改该对象上的内容并将其设置回状态。 如果你使用键控对象，你只通过在getInitialState中传递一个对象来使用状态的方式会更容易。

handleChange: function (e) {
   item = this.state.items[1];
   item.name = 'newName';
   items[1] = item;

   this.setState({items: items});
}

以下是如何在没有帮助库的情况下做到这一点:

handleChange: function (e) {
    // 1. Make a shallow copy of the items
    let items = [...this.state.items];
    // 2. Make a shallow copy of the item you want to mutate
    let item = {...items[1]};
    // 3. Replace the property you're intested in
    item.name = 'newName';
    // 4. Put it back into our array. N.B. we *are* mutating the array here, 
    //    but that's why we made a copy first
    items[1] = item;
    // 5. Set the state to our new copy
    this.setState({items});
},

如果你愿意，你可以结合步骤2和3:

let item = {
    ...items[1],
    name: 'newName'
}

或者你可以用一行写完:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

注意:我将项目创建为数组。OP使用一个对象。然而，概念是一样的。

你可以看到在你的终端/控制台发生了什么:

❯ node
> items = [{name:'foo'},{name:'bar'},{name:'baz'}]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> clone = [...items]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> item1 = {...clone[1]}
{ name: 'bar' }
> item1.name = 'bacon'
'bacon'
> clone[1] = item1
{ name: 'bacon' }
> clone
[ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ]
> items
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items`
> items === clone
false // these are different objects
> items[0] === clone[0]
true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!)
> items[1] === clone[1]
false // this guy we copied

发现这令人惊讶地困难，没有一个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>
    )
  }
}

如果你只需要改变数组的一部分， 你有一个状态设置为的react组件。

state = {items: [{name: 'red-one', value: 100}, {name: 'green-one', value: 999}]}

最好更新数组中的red-one，如下所示:

const itemIndex = this.state.items.findIndex(i=> i.name === 'red-one');
const newItems = [
   this.state.items.slice(0, itemIndex),
   {name: 'red-one', value: 666},
   this.state.items.slice(itemIndex)
]

this.setState(newItems)

首先获取您想要的项目，更改该对象上的内容并将其设置回状态。 如果你使用键控对象，你只通过在getInitialState中传递一个对象来使用状态的方式会更容易。

handleChange: function (e) {
   item = this.state.items[1];
   item.name = 'newName';
   items[1] = item;

   this.setState({items: items});
}

你可以使用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中的简单组件通信课程，了解如何将回调函数从持有状态的父组件传递给需要触发状态更改的子组件。