Есть ли способ использовать переменную как часть значения при установке состояния из реквизита в ReactJS?

Question

Я очень новичок в React. Я пытаюсь сделать компонент Checkbox многократного использования. Эти флажки предназначены для отправки информации в API. У меня есть команда GET на App.JS, чтобы установить состояние.

Вот упрощенная версия моего API

{
 "devices":[
   {
    "id":1,
    "valveA": true,
    "valveB": false,
    "valveC": true,
   },
   {
    "id":2,
    "valveA": false,
    "valveB": true,
    "valveC": false,
   }

 ]
}

Я передаю реквизит детям так:

render() {
    const {devices} = this.state;
    return (       
          <div >
            {devices.map(device => (
              <Device device={device} key={device.id} />
            ))}
          </div>     
    );

Я могу сделать отдельные компоненты для каждого флажка и установить состояние checked, установив индивидуальное состояние следующим образом:

 state = { checked: this.props.device.valveA }

Но это означает, что мне нужно создать компонент для каждого «клапана» в моем API. В идеале я хотел бы иметь один компонент Checkbox, который я могу повторно использовать для всех своих «клапанов».

Я сделал полуработающий компонент, указав название клапана в качестве опоры:

<Device device={device} key={device.id} switchFor="valveA" />

А вот мой компонент, который успешно передает изменение в API, однако мне нужно динамически установить последнюю часть setState

this.props.device.{{{I WANT THIS TO BE DYNAMIC}}}

, в противном случае все переключатели просто получают состояние клапана A:

state = { checked: false };

  componentDidMount(){

    this.setState({ checked: this.props.device.valveStatus })
  }


  handleCheckboxChange = event => {
    const type = this.props.switchFor;

    const checkedStatus = event.target.checked;

    const deviceID = this.props.device.id;

    const obj = {};
    obj[type] = checkedStatus;

    this.setState({ checked: checkedStatus });

    axios
      .patch(`http://localhost:3001/devices/${deviceID}`, obj)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  };

  render() {
    const { device } = this.props;
    const theFor = this.props.switchFor + device.id;
    return (
      <div className="custom-control custom-switch">
        <input
          type="checkbox"
          className="custom-control-input"
          id={theFor}
          checked={this.state.checked}
          onChange={this.handleCheckboxChange}
        />
        <label className="custom-control-label" htmlFor={theFor}>
          toggle
        </label>
      </div>
    );
  }

Извините, если мой код немного неопрятный, я новичок в React.

Я не уверен, что двигаюсь в правильном направлении, у меня почему-то возникает ощущение, что есть более простой способ сделать это.

Answer 1

Ваше объяснение на самом деле не совсем понятно, но я думаю, что могу ВИДЕТ понять, что вы пытаетесь сделать.Если я не прав, просто игнорируй меня.Таким образом, кажется, что вы хотите иметь возможность изменить, какой клапан / переключатель объекта устройства будет отображаться вашим компонентом.Если это так, просто установите это как состояние.Вдобавок ко всему, я могу подумать об использовании массива, который отражает ваш массив «устройств»:

this.state = {
    "devices":[
       {
        "id":1,
        "valveA": true,
        "valveB": false,
        "valveC": true,
       },
       {
        "id":2,
        "valveA": false,
        "valveB": true,
        "valveC": false,
       }
    ],
    "selectedValve": ["valveA", "valveB"]
}

Затем при рендеринге компонентов вашего устройства просто выполните:

render() {
    const {devices} = this.state;
    return (       
          <div >
            {devices.map((device, ind) => (
              <Device device={device} key={device.id} switchFor={this.state.selectedValve[ind]} />
            ))}
          </div>     
    );
}

Чтобы сменить клапан конкретного устройства, вы можете:

handleSwitchChange(deviceInd, newValve){
    let copySelectedValve = [...this.state.selectedValve];
    copySelectedValve[deviceInd] = newValve;

    this.setState({
        selectedValve: copySelectedValve;
    })
}

Чтобы сменить первое устройство на valveB, вам достаточно сделать handleSwitchChange (0, "valveB");Чтобы изменить истину / ложь клапана устройства, вы можете написать что-то вроде: