reactjs - react 文本输入字段，重新渲染组件后，输入仍然保持旧值

Question

我遇到一个问题，在 React 中，在我使用 this.forceUpdate() 之后，组件 DOM 会更新，但 DOM(input) 仍然保持旧值。就像图片中一样，首先我添加了四行输入，并注意每个 num 上的数字，然后我删除了第一行，DOM 应该保留最后三行(2,3,4)，但是结果是组件保留前三行 (1,2,3)。

然后我检查页面，发现组件确实删除了第一行(编号为 1 的行)，但是 DOM 仍然显示前三行，就像我删除第四行一样。

谁能告诉我原因？谢谢!

Modal with four rows of input before delete

Modal with three rows of input after delete

detail explain

import React  from 'react'
import Button from 'react-bootstrap/lib/Button'
import Modal from 'react-bootstrap/lib/Modal'


export default class AddAccountModal extends React.Component{

  constructor(props) {
    super(props)
    this.state = {
      newAccount: [{source: '', url: '', name: ''}],
    }

    this.getState = this.getState.bind(this);
    this.addMoreAccount = this.addMoreAccount.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
    this.deleteAccount = this.deleteAccount.bind(this);
  }


  getState(){
    return this.state
  }

  updateInputValue(event){
    this.state.newAccount[event.target.id][event.target.name] = event.target.value
  }

  deleteAccount(event){
    console.log(event.target.id)
    this.state.newAccount.splice(event.target.id,1)
    console.log(this.state.newAccount)
    this.forceUpdate()
  }

  addMoreAccount(){
    this.state.newAccount.push({source: '', url: '', name: ''})
    console.log(this.getState()['newAccount'])
    this.forceUpdate()
  }

  render(){
    return (
      <Modal {...this.props}
             bsSize="large"
             aria-labelledby="contained-modal-title-lg">
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">
            Add New Account
            <Button className="pull-right" onClick={this.props.hideModal}>X</Button>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="row">
            <table className="table table-striped">
              <thead><th>Account source</th><th>Account URL</th><th>Account name</th><th>Delete</th></thead>
              <tbody>
                {
                  this.state.newAccount.map(
                    (account,index)=>{return <tr>
                      {/*<td><input type="text" class="form-control" name='source' id={index} onChange={this.updateInputValue} defaultValue={account.source}/></td>*/}
                      <td><input type="text" class="form-control" name='source' id={index} onChange={this.updateInputValue} ref={(input)=>{account.source=input}}/></td>
                      <td><input type="text" class="form-control" name='url' id={index} onChange={this.updateInputValue} defaultValue={account.url}/></td>
                      <td><input type="text" class="form-control" name='name' id={index} onChange={this.updateInputValue} defaultValue={account.name}/></td>
                      <td><i className="fa fa-trash" aria-hidden="true" id={index} onClick={this.deleteAccount}></i></td>
                    </tr>})
                }
                <tr><td></td><td><button onClick={ this.addMoreAccount }>+</button></td><td></td></tr>
              </tbody>
            </table>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.hideModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }

}

Answer 1

您不应该对状态执行直接操作。

如果您正确使用 setState，则无需调用 forceUpdate，setState 本身会调用应用程序的重新渲染.

我会建议您将 indexbind 到 deleteAccount 函数，而不是从事件中设置和检索 id。

为了正确地改变你需要的状态，可以在临时数组中克隆状态变量并更改它，然后像这样设置状态

deleteAccount(id){
    var newAccount = [...this.state.newAccount];
    newAccount.splice(id,1);
    this.setState({newAccount}, () => {console.log(this.state.newAccount)});
  } 

我假设在

之后您的 map 函数中的额外 }

 <td><i className="fa fa-trash" aria-hidden="true" id={index} onClick={this.deleteAccount}></i></td>
                </tr>}    <------ here

是您原始代码中没有的拼写错误。如果它在那里，您需要将其删除。

此外，当您设置 State 时，它​​不会立即发生变化，因此如果您想在应该使用 setState 回调之后立即记录它，就像我在下面的代码中使用的那样

this.setState({newAccount}, () => {console.log(this.state.newAccount)});

完整的代码应该是这样的

import React  from 'react'
import Button from 'react-bootstrap/lib/Button'
import Modal from 'react-bootstrap/lib/Modal'


export default class AddAccountModal extends React.Component{

  constructor(props) {
    super(props)
    this.state = {
      newAccount: [{source: '', url: '', name: ''}],
    }

    this.getState = this.getState.bind(this);
    this.addMoreAccount = this.addMoreAccount.bind(this);
    this.updateInputValue = this.updateInputValue.bind(this);
    this.deleteAccount = this.deleteAccount.bind(this);
  }


  getState(){
    return this.state
  }

  updateInputValue(event){
    var newAccount = [...this.state.newAccount];
    newAccount[event.target.id][event.target.name] = event.target.value;
    this.setState({newAccount});
  }

  deleteAccount(id){
    var newAccount = [...this.state.newAccount];
    newAccount.splice(id,1);
    this.setState({newAccount}, () => {console.log(this.state.newAccount)});
  } 

  addMoreAccount(){
    var newAccount = [...this.state.newAccount];
    newAccount.push({source: '', url: '', name: ''})
    this.setState({newAccount}, () => {console.log(this.state.newAccount)})

  }

  render(){
    return (
      <Modal {...this.props}
             bsSize="large"
             aria-labelledby="contained-modal-title-lg">
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">
            Add New Account
            <Button className="pull-right" onClick={this.props.hideModal}>X</Button>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="row">
            <table className="table table-striped">
              <thead><th>Account source</th><th>Account URL</th><th>Account name</th><th>Delete</th></thead>
              <tbody>
                {
                  this.state.newAccount.map(
                    (account,index)=>{return <tr>
                      {/*<td><input type="text" class="form-control" name='source' id={index} onChange={this.updateInputValue} defaultValue={account.source}/></td>*/}
                      <td><input type="text" class="form-control" name='source' id={index} onChange={this.updateInputValue} ref={(input, index)=>{account.source=input}}/></td>
                      <td><input type="text" class="form-control" name='url' id={index} onChange={this.updateInputValue} defaultValue={account.url}/></td>
                      <td><input type="text" class="form-control" name='name' id={index} onChange={this.updateInputValue} defaultValue={account.name}/></td>
                      <td><i className="fa fa-trash" aria-hidden="true" id={index} onClick={this.deleteAccount.bind(this, index)}></i></td>
                    </tr>)
                }
                <tr><td></td><td><button onClick={ this.addMoreAccount }>+</button></td><td></td></tr>
              </tbody>
            </table>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.props.hideModal}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }

}