У меня есть компонент, который получает данные из магазина.Как я могу обновить полученные данные и повторно изменить компонент при изменении

Question

У меня есть магазин, который дает мне массив объектов паролей. Например:

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

Я могу получить доступ к этим паролям в своем компоненте как this.props.passwords

Я пытаюсь заполнить их в пользовательском интерфейсе как список с помощью кнопки (Обновить/ Подтвердить) - я переключаюсь между ними, используя состояние уровня компонента

Поскольку это состояние уровня компонента, если я нажимаю одну кнопку, все кнопки меняются

Вот мой код

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>

Нужен лучший подход для решения этой проблемы

Рабочий пример приведен в следующем Ссылка

Идентификаторы уникальны для элементов пароля - ожидаемое обновление / подтверждение результата необходимо переключать только для нажатой кнопки

Заранее спасибо

Answer 1

Как сказал sellmeadog, вы должны создать родительский компонент, который будет содержать 2 компонента.Каждый компонент будет иметь свое собственное состояние, а родительский компонент даст каждому дочернему элементу свой реквизит.Таким образом, каждая кнопка будет иметь свое собственное состояние, что означает «отключено».В целом это должно выглядеть так:

class PasswordsContainer extends React.Component {
  constructor(props) {
    super(props);
    const data = [
      {
        password: 'passwordone',
        createdAt: 'Jan 2, 2019',
      },

      {
        password: 'passwordtwo',
        createdAt: 'Jan 2, 2019',
      },
    ];

    this.state = {
      disabled: false,
      data: data,
    };
    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() {
    return (
      <div>
        {this.state.data.map(element => {
          return <Password data={element} />;
        })}
      </div>
    );
  }
}
class Password extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
      data: this.props.data,
    };
    this.handleUpdate = this.handleUpdate.bind(this);
  }

  handleUpdate(element) {
    this.setState({
      disabled: !this.state.disabled,
    });
  }

  render() {
    let element = this.state.data;
    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>
    );
  }
}

ReactDOM.render(<PasswordsContainer />, 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>

Скажите, пожалуйста, если что-то неясно

Answer 2

У вас возникла эта проблема, потому что вы присвоили обеим кнопкам одинаковое значение в вашем состоянии.Переключив одну кнопку и обновив значение общего состояния, будет иметь смысл обновить обе кнопки.

Вместо этого вам следует переместить свои кнопки вниз в дочерний компонент, где они отслеживают свою собственную часть.состояния.Поэтому, если вы нажмете одну кнопку, она изменит только состояние этого компонента.