如何更新狀態中的特定數組元素？

Question

我有狀態：

this.state = {
  count: 1,
  currentKey: '1',
  form: [{ cost: '', amount: '1', key: 1 }]
}

我需要更新成本而不更改其他元素

我試圖這樣做：

this.setState(prevState => ({
  form: [
    {
      cost: e,
      amount: prevState.form[this.state.currentKey - 1].amount,
      key: prevState.form[this.state.currentKey - 1].key
    }
  ]
}))

但它得到TypeError：無法讀取未定義的屬性'amount'。

Answer 1

也許是一種更簡單的方法：定義成本將是多少，然后設置狀態。

const cost = (+this.state.currentKey + 1).toString();
this.setState({
  ...this.state,
  form: [{ ...this.state.form[0], cost }]
});

DEMO

Answer 2

您每次都覆蓋form數組。
您需要映射到數組並僅更改所需的對象，我猜它是根據您所在州的currentKey屬性確定的。
您應該執行以下操作：

form.map((f) => {
  if (f.key !== currentKey) return f;
    return {
      ...f,
      cost: newCost
   }
});

這是一個完整的示例，我添加了一些按鈕和輸入，以便您可以添加表單並更改每種表單的cost （更改表單之前，請不要忘記選擇表單！）。

 class Form extends React.Component { onFormSelect = () => { const { onFormSelect, formKey } = this.props; onFormSelect(formKey); } render() { const { index, formKey, cost, amount, active } = this.props; return ( <div className={`form ${active && "active"}`} onClick={this.onFormSelect}> <div>{`Form - #${index}`}</div> <div>{`key - ${formKey}`}</div> <div>{`cost - ${cost}`}</div> <div>{`amount - ${amount}`}</div> <hr /> </div> ); } } class App extends React.Component { constructor(props) { super(props); this.state = { count: 1, currentKey: '1', form: [{ cost: '', amount: '1', key: 1 }], newCost: '' } } addForm = () => { const { form } = this.state; const newCount = form.length + 1; const newForm = { cost: '', amount: '', key: newCount }; this.setState({ count: newCount, form: [ ...form, newForm ] }) } onFormSelect = formId => { this.setState({ currentKey: formId }) } onNewCostChange = ({ target }) => this.setState({ newCost: target.value }); onNewCostsubmit = () => { const { form, currentKey, newCost } = this.state; const nextForm = form.map((f) => { if (f.key !== currentKey) return f; return { ...f, cost: newCost } }); this.setState({ form: nextForm }); } render() { const { form, count, currentKey, newCost } = this.state; return ( <div> <div> <span>{`count: ${count} --- current key: ${currentKey} `}</span> <button onClick={this.addForm}>Add form</button> <div> <input type="text" value={newCost} placeholder="set cost" onChange={this.onNewCostChange} /> <button onClick={this.onNewCostsubmit}>Submit</button> </div> </div> <hr /> { form.map((f, i) => { return ( <Form key={i} formKey={f.key} active={f.key === currentKey} index={i} amount={f.amount} cost={f.cost} onFormSelect={this.onFormSelect} /> ); }) } </div> ); } } ReactDOM.render(<App />, document.getElementById('root')); 

 .form{ cursor: pointer; padding: 10px; } .active{ background-color: #333; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>