javascript - 使用 map 更新没有对象的数组

Question

如果我有一个像这样的对象数组

[{name: 'james', name: 'john'}] 并且我知道 john 的索引并且想更改 john 的值我会做

person = person.map((p, i)=>i===index?({...p, name: 'changed john'})):p)this.setState({person})

但是如果数组是这样的呢？['詹姆斯', '约翰']

Answer 1

but what if the array is like this? ['james', 'john']

因为更新状态的正确方法是使用 setState 方法，因此，直接改变状态的行为就像 this.state.list[i]="Changed John" 不会工作。我认为我们只是像往常一样使用 Array.prototype.map() 。像这样:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['james', 'john']
    };
  }
  handleDelete = i => {
    const newList = this.state.list.filter((li, idx) => idx !== i);
    this.setState({ list: newList });
  };
  handleChange = i => {
    const newList = this.state.list.map(
      (li, idx) => (idx === i ? 'Changed ' + li : li)
    );
    this.setState({ list: newList });
  };
  render() {
    return (
      <div>
        {this.state.list.map((e, i) => (
          <div key={i}>
            <p>{e}</p>
            <button onClick={() => this.handleDelete(i)}>Delete</button>
            <button onClick={() => this.handleChange(i)}>Change</button>
          </div>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>

---