如何在React.js中使用条件？

Question

我有一个即将到来的清单

0 and 1

。现在我想切换它。如果我点击 1，它将转换为 0，如果我点击 0，它将转换为 1。

演示：https://codesandbox.io/s/ternary-condition-qlqpmj?file=/src/App.js

我的代码：

import React, { useState } from "react";
import { Button } from "@mui/material";
import "./styles.css";

const data = [
  {
    title: "title1",
    IsActive: 1
  },
  {
    title: "title2",
    IsActive: 0
  },
  {
    title: "title3",
    IsActive: 1
  },
  {
    title: "title4",
    IsActive: 1
  }
];

export default function App() {
  const [data2, setData2] = useState(data);
  const [updatedToggle, setUpdatedToggle] = useState();

  const deleteHandle = (title, toggle) => {
    console.log({ title, toggle });
    if (toggle === "1") {
      setUpdatedToggle("0");
    } else {
      setUpdatedToggle("1");
    }
    console.log(updatedToggle);
  };

  return (
    <div className="App">
      {data2
        ? data2.map((val, i) => (
            <div className="box" key={i}>
              <h2>{val.title}</h2>
              <Button onClick={() => deleteHandle(val.title, val.IsActive)}>
                Delete
              </Button>
              <Button>{val.IsActive}</Button>
            </div>
          ))
        : ""}
    </div>
  );
}

Answer 1

这段代码有一些“糟糕的代码”，但它会对你有用。

*使用

title

作为键 - 不是好的做法。

*使用

i

来查找所需的对象 - 不是好的做法。

为了这个目标，你需要有独特的

id

import React, { useState } from "react";
import { Button } from "@mui/material";
import "./styles.css";

const data = [
  {
    title: "title1",
    IsActive: 1
  },
  {
    title: "title2",
    IsActive: 0
  },
  {
    title: "title3",
    IsActive: 1
  },
  {
    title: "title4",
    IsActive: 1
  }
];

export default function App() {
  const [data2, setData2] = useState(data);
  
  const deleteHandle = (index) => {
    let { IsActive } = data2[index]

    IsActive = IsActive === 0 ? 1 : 0

    // Copy data
    const newData2 = [...data2]

    newData2[index] = { ...newData2[index], IsActive }

    setData2(newData2)
  };

  return (
    <div className="App">
      {data2
        ? data2.map((val, i) => (
            <div className="box" key={val.title}>
              <h2>{val.title}</h2>
              <Button onClick={() => deleteHandle(i)}>
                Delete
              </Button>
              <Button>{val.IsActive}</Button>
            </div>
          ))
        : ""}
    </div>
  );
}