如何在 Map Function 内部使用 React Toggle

Question

我正在尝试使用 map function 内部的切换开关。 我以为我明白了，但我的逻辑显然有问题。 当我单击 map 中的一些切换项时，我必须单击它们两次才能看到更改。 当我将一项切换为真，然后立即将另一项切换为真时，似乎会发生这种情况。 提前感谢您的帮助。

这是 CodeSandbox： https://codesandbox.io/s/nice-hertz-srgew

和代码：

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const [people, setPeople] = useState([]);
  const [prodToggle, setProdToggle] = useState(false);
  const [partToggle, setPartToggle] = useState(false);

  useEffect(() => {
    axios.get("./data.json").then((res) => {
      setPeople(res.data.people);
    });
  }, []);

  const onAddProdSelect = () => {
    const updatedProdToggle = !prodToggle;
    setProdToggle(updatedProdToggle);
  };

  const onAddPartSelect = (i) => {
    const updatedToggle = !partToggle;
    setPartToggle(updatedToggle);
    const updatedData = people.map((item, idx) => {
      if (idx === i) {
        return {
          ...item,
          itemPartToggle: updatedToggle
        };
      }
      return item;
    });
    setPeople(updatedData);
  };

  return (
    <main>
      <div onClick={() => onAddProdSelect()}>
        <p>{prodToggle ? "Red" : "Blue"}</p>
      </div>
      {people.map((person, i) => (
        <div onClick={() => onAddPartSelect(i)} key={i}>
          <p>{person.itemPartToggle ? person.name : person.age}</p>
        </div>
      ))}
    </main>
  );
}

Answer 1

您的问题是您通过使用partToggle state 与您的所有人员对象共享一个切换 state。 相反，请在每个 object 上保留切换 state（就像您当前对itemPartToggle所做的那样），并使用它来确定您单击的特定 object 的切换值应该更改为：

const onAddPartSelect = (i) => {
    const updatedData = people.map((item, idx) => {
      if (idx === i) {
        return {
          ...item,
          itemPartToggle: !item.itemPartToggle // use the flipped version of the current toggle state for the current item
        };
      }
      return item;
    });
    setPeople(updatedData);
};

请参见下面的示例：

 const { useState, useEffect } = React; function App() { const [people, setPeople] = useState([{"id":"1","name":"Bob","age":"21"},{"id":"2","name":"Ed","age":"45"},{"id":"3","name":"Mary","age":"32"},{"id":"4","name":"Tom","age":"76"}]); // hardcoding data for example const [prodToggle, setProdToggle] = useState(false); const onAddProdSelect = () => { const updatedProdToggle =;prodToggle; setProdToggle(updatedProdToggle); }. const onAddPartSelect = (i) => { const updatedData = people,map((item. idx) => { if (idx === i) { return {..,item: itemPartToggle. ;item;itemPartToggle }; } return item; }); setPeople(updatedData)? }: return ( <main> <div onClick={() => onAddProdSelect()}> <p>{prodToggle. "Red", "Blue"}</p> </div> {people.map((person? i) => ( <div onClick={() => onAddPartSelect(i)} key={i}> <p>{person.itemPartToggle: person.name; person.age}</p> </div> ))} </main> ), } ReactDOM.render(<App />; document.body);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>