Question

我有一个映射的项目列表作为单选按钮。我正在切换检查状态。

我从setCheckedState({i: false});收到一个错误，导致过多的重新渲染。

我将如何解决这个问题？

// Import useState
import { useState } from 'react';

// Set your active and SetActive items
const [active, setActive] = useState({});

{Object.values(equipment).map((item, i) => {
    // Defautl the item to non active
    setActive({i:false});
    return (
        <IonItem key={item}>
            <IonLabel>{item}</IonLabel>
            <IonRadio mode="md" slot="start" value={item} checked={active.i} onClick={() => {
                // Set the specific Item to active
                setActive({i:!active.i});
            }} />
        </IonItem>
    );
})}

Answer 1

正如Jayce444所指出的，由于无限循环，渲染中的setActive({i:false});会让您遇到麻烦。

顺便说一句，您打错了setActive。调用setActive({i:!active.i})将完全覆盖状态对象，使其成为单个键/值对。一个例子：

假设您从

开始

active = {1: true, 2: false}
 // then you call
setActive({2:!active.2}) // now active looks like {2:!false} = {2: true}
// then you call
setActive({1:!active.1}) // now active looks like {1:!undefined} = {1: true}
// in this case you just happen to be getting lucky because
// all <IonRadio ... checked={active.i} ../> (other than your current set i)
// are evaluating to checked={undefined} which is the same as unchecked

您缺少的是在更新特定密钥之前复制现有状态。因此，将所有内容放在一起是一种可能的解决方案（CodeSandbox here）


  const [active, setActive] = useState({});

  const [oneOnly, setOneOnly] = useState("");

  return (
    <div className="App">
      <h3>If you want to have multiple selections</h3>
      {Object.values(equipment).map((item, i) => (
        <label>
          <input
            key={item+"multi"}
            type="radio"
            value={item+"multi"}
            checked={active[item] || false}
            onClick={e => {
              setActive({ ...active, [item]: !active[item] });
            }}
          />
          {i}) {item}
          <br />
        </label>
      ))}
      <h3>... Or just one</h3>
      {Object.values(equipment).map((item, i) => (
        <label>
          <input
            key={item + "single"}
            type="radio"
            value={item + "single"}
            checked={oneOnly === item}
            onClick={e => {
              setOneOnly(item);
            }}
          />
          {i}) {item}
          <br />
        </label>
      ))}
    </div>
  )

Answer 2

尝试此代码

// Import useState
import { useState } from 'react';

// Set your active and SetActive items
const [active, setActive] = useState({});

{Object.values(equipment).map((item, i) => {
    // Defautl the item to non active
    setActive(prev => {...prev, [i]: false});
    return (
        <IonItem key={item}>
            <IonLabel>{item}</IonLabel>
            <IonRadio mode="md" slot="start" value={item} checked={active[i]} onClick={() => {
                // Set the specific Item to active
                setActive(prev => {...prev, [i]:!prev[i]});
            }} />
        </IonItem>
    );
})}

Re渲染太多了React JS-useState

2 个答案: