为什么我的函数没有将所有选中的项目推送到数组 (ReactJs)？

Question

我有一些数据正在映射并相应地显示项目。我的 if 语句都有效，直到我 select 多了一个复选框。 问题：为什么只有勾选一项有效，两项无效？（或三个等）

我的组件：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    { name: "title 1" },
    { name: "title 2" },
    { name: "title 3" },
    { name: "title 4" },
    { name: "title 5" }
  ];

  const [checkBoxSearch, setCheckBoxSearch] = useState([]);
  // const [checkBoxSearch, setCheckBoxSearch] = useState("");
  const [itemChecked, setItemChecked] = useState(true);

  const checkItem = (e) => {
    setItemChecked((itemChecked) => !itemChecked);
    if (itemChecked) {
      //WHY WONT MY CHECKBOX PUSH ALL CHECKED ITEMS?
      setCheckBoxSearch([...checkBoxSearch, e.target.name]);
      // setCheckBoxSearch(e.target.name);
    } else {
      setCheckBoxSearch("");
    }
    console.log(checkBoxSearch);
  };

  return (
    <div className="App">
      <input
        type="checkbox"
        name="title 1"
        value="title 1"
        onChange={(e) => {
          checkItem(e);
        }}
      ></input>
      <label>title 1</label>
      <input
        type="checkbox"
        name="title 2"
        value="title 2"
        onChange={(e) => {
          checkItem(e);
        }}
      ></input>
      <label>title 2</label>

      <div className="itemsWrapper">
        {data
          .filter((value) => {
            if (value.name === "") {
              return value;
            } else if (value.name.includes(checkBoxSearch)) {
              return value;
            }
          })
          .map((dataItem) => {
            return (
              <div key={dataItem.name} className="items">
                {dataItem.name}
              </div>
            );
          })}
      </div>
    </div>
  );
}

如果需要，这里有一个可用的代码和框： https://codesandbox.io/s/intelligent-cdn-ime2oe?file=/src/App.js

Answer 1

你的

const [itemChecked, setItemChecked] = useState(true);

整个组件共享。如果您希望每个复选框都有自己的状态，显示的 div 稍后会反映出来，请使用状态数组代替复选框。

const values = ['title 1', 'title 2'];
function App() {
  const data = [
    { name: "title 1" },
    { name: "title 2" },
    { name: "title 3" },
    { name: "title 4" },
    { name: "title 5" }
  ];
  const [valuesToSearchFor, setValuesToSearchFor] = React.useState([]);
  return (
    <div className="App">
      {
        values.map(value => (
          <React.Fragment>
          <input
            type="checkbox"
            name={value}
            value={value}
            onChange={() => {
              setValuesToSearchFor(
                valuesToSearchFor.includes(value)
                  ? valuesToSearchFor.filter(val => val !== value)
                  : [...valuesToSearchFor, value]
              );
            }}
          ></input>
          <label>{value}</label>
          </React.Fragment>
        ))
      }
      <div className="itemsWrapper">
        {data
          .filter(value => !valuesToSearchFor.length || valuesToSearchFor.includes(value.name))
          .map((dataItem) => {
            return (
              <div key={dataItem.name} className="items">
                {dataItem.name}
              </div>
            );
          })}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

为什么我的函数没有将所有选中的项目推送到数组 (ReactJs)？

Why isn't my function pushing all checked items to the array (ReactJs)?

javascript

arrays

reactjs

filter

array.prototype.map