如何在 Map 函数中使用 React Toggle

Posted 2023-02-18

【中文标题】如何在 Map 函数中使用 React Toggle

【英文标题】：How to Use React Toggle Inside Map Function

【发布时间】：2021-12-30 17:26:27

【问题描述】：

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

这里是 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>
  );

【参考方案1】：

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

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>