反应 useState 条件初始值

Question

我想做的是：

单击按钮时，应从数组列表中删除初始值并替换为组件值。

另一方面，数组列表在任何时候都不应该为空。如果您从列表中一个一个地删除您的组件（通过在它们已经被选中时选择它们），初始值应该会在所有组件都消失后立即重新出现。

这是我的代码：

import "./box.css";
import React from "react";

export default function Box({ name, age, id, adder }) {
  return (
    <div className="container">
      <p>ID: {id}</p>
      <p>Name: {name}</p>
      <p>Age : {age}</p>
      <button
        onClick={() => {
          adder(name, age);
        }}
      >
        click me
      </button>
    </div>
  );
}

Answer 1

嘿，所以我对你的 app.js 做了一些简单的更改 =>

import "./App.css";
import { data } from "./Data";
import { useState } from "react";
import React from "react";

import Box from "./components/box";
function App() {
  const [list, setList] = useState([]);
  const adder = (name, age) => {
    if (list.some((item) => item.name === name)) {
      setList(list.filter((item) => item.name !== name));
    } else {
      setList([...list, { name: name, age: age }]);
    }
  };
  console.log(list);
  return (
    <div className="App">
      {data.map((el) => {
        return <Box key={el.id} {...el} adder={adder} list={list} />;
      })}
      <h3>
        ArrayList :
        {list.length >= 1? list.map((el) => {
         return `[${el.name} ${el.age}], `;
        }):'unknown unknown'}
      </h3>
    </div>
  );
}

export default App;

我所做的是从列表中删除初始对象（将其留空[]），然后询问列表中是否有项目，如果没有，我会根据需要显示未知。

反应 useState 条件初始值

React useState conditional initial value

reactjs

use-state