问我有一个从商店接收数据的组件。如何更新接收到的数据并在更改时重新呈现组件

EN

const passwords = [{
    id: 'hjgkjhkjl',
    password: 'jhckjdhf',
    createdAt: 'jan 3rd, 2019'
  },
  {
    id: 'uygkjhkj',
    password: 'kdjhfkjdhf',
    createdAt: 'jan 3rd, 2019'
  }
]

class Passwords extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      disabled: false

    }
    this.handleUpdate = this.handleUpdate.bind(this)
  }

  handleUpdate(element) {
    // this.context.executeAction(removePassword, element.createdAt)
    // this.context.executeAction(fetchPasswords)
    this.setState({
      disabled: !this.state.disabled,
    })
  }

  render() {

    const data = [
      {
        password: "passwordone",
        createdAt: "Jan 2, 2019"
      },
      {
        password: "passwordtwo",
        createdAt: "Jan 2, 2019"
      }
    ];

    return (
      <div>
        {data.map((element) => {
          return (
            <div>
              <input value={element.password} disabled={!this.state.disabled}/>
              <span style={{marginLeft: "15px"}}> {element.createdAt} </span>
              <span style={{marginLeft: "15px"}}>
                <button onClick={() => this.handleUpdate(element)}> 
                  {this.state.disabled ? "Confirm" : "Update"}
                </button> 
              </span>
            </div>
          )
        })}
      </div>
    )
  }
}

ReactDOM.render(<Passwords/>, document.getElementById('root'));

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

</div>