reactjs - react : How to change status of toggle switch inside map?

Question

我正在尝试将一组键映射到切换列表 <Switch>成分。每个切换开关的状态都来自 redux。当我点击 <Switch> ，我希望组件的切换状态能够交替。

我尝试调用setState在 onChange <Switch> 上的处理程序，但它没有按预期工作。如何编写一个可以切换开关的函数？

这是我到目前为止所拥有的:

{Object.keys(all_product).map((item, index) => {
  console.log(all_product[item]);
  let product = all_product[item];
  this.state.activevalue = product.is_active;
  let val;

  product.is_active == 1 ? (val = true) : (val = false);

  this.state = { checked: val };

  return (
    <tr>
      <th scope="row">{product.id}</th>
      <td>
        <img
          src={`/img/${product.code}.jpg`}
          alt={product.name}
          class="img-fluid dataTableImg"
        />
      </td>
      <td>{product.name}</td>
      <td>{product.brand}</td>
      <td>{product.quantity}</td>
      <td>{product.unit_price}</td>
      <td>
        <Switch
          onChange={() => {
            this.setState({ checked: !val });
          }}
          checked={this.state.checked}
          value={"A"}
        />
      </td>
    </tr>
  );
})}

Answer 1

如果我正确理解你的问题，你会得到 all_product来自 redux 商店的 map 。 all_products map 包含 is_active值字段来确定每个 <Switch> 的初始状态组件，然后从那里，<Switch>然后由封闭组件内部的状态控制。

假设我的理解是正确的，一种解决方案可能是阅读并更新 checked每个 <Switch> 的支柱通过在封闭组件中跟踪的键/值的组件:

/* Read checked state */
let isChecked = this.state[ item ]

/* Update (toggle) checked state */
this.setState({ [ item ] : !isChecked })

将其与您的代码集成可能如下所示:

{Object.keys(all_product).map((item, index) => {

  /* Get product */
  const product = all_product[item];

  /* First try to get "checked value" from state */
  let isChecked = this.state[ item ]

  /* If isChecked fetched from state not present or
     then default to the is_active value supplied by
     your redux store */
  if(typeof isChecked === 'undefined') {
      isChecked = product.is_active;
  }

  return (
    <tr>
      <th scope="row">{product.id}</th>
      <td>
        <img
          src={`/img/${product.code}.jpg`}
          alt={product.name}
          class="img-fluid dataTableImg"
        />
      </td>
      <td>{product.name}</td>
      <td>{product.brand}</td>
      <td>{product.quantity}</td>
      <td>{product.unit_price}</td>
      <td>
        { /* Use locally defined isChecked to set checked 
        prop, and update setState to set negated isChecked
        for item by key  */}
        <Switch
          onChange={() => {
            this.setState({ [ item ]: !isChecked });
          }}
          checked={ isChecked }
          value={"A"}
        />
      </td>
    </tr>
  );
})}