时间戳

首页 > 解决方案 > 我有一个从商店接收数据的组件。如何更新收到的数据并在更改时重新渲染组件

javascript - 我有一个从商店接收数据的组件。如何更新收到的数据并在更改时重新渲染组件

问题描述

我有一个商店，它给了我密码对象的数组例如：

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

我可以在我的组件中访问此密码作为 this.props.passwords

我正在尝试将它们作为带有按钮的列表（更新/确认）在 UI 上填充 - 我正在使用组件级别状态在它们之间切换

因为如果我单击一个按钮，它是组件级别的状态，所有按钮都将被更改

这是我的代码

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>

需要更好的方法来解决这个问题

工作示例在以下链接中

id 对于密码项是唯一的 - 预期结果更新/确认只需要为单击按钮进行切换

提前致谢

标签： javascriptarraysreactjsjavascript-objects

解决方案

您遇到此问题是因为您将两个按钮分配给您所在州的相同值。通过切换一个按钮并更新该共享状态值，两个按钮都得到更新是有意义的。

你应该做的是将你的按钮向下移动到一个子组件中，在那里它们可以跟踪自己的状态。因此，当您单击一个按钮时，它只会更改该组件的状态。

推荐阅读