reactjs - Too Many Re Renders React JS - useState

Question

I have a mapped list of items as radio buttons. I am toggling the checked state.

I get an error from setCheckedState({i: false}); causing too many re renders.

How would I go about fixing this?

// 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>
    );
})}

标签： reactjsloopsbabeljs

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）

  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>
  )