根據復選框中選定的專案過濾資料在React中不起作用

在我的反應代碼中，我有一個默認資料，在沒有選中復選框的情況下隨時顯示，但是當有選中的值時，資料應該更新并根據選中的值回傳另一個資料。但我目前所擁有的并沒有給我我所期望的。請幫我檢查我做錯了什么。

我期待的是表回傳另一個帶有選中值的表......在表中其他任何地方找到選中的值，如果沒有找到回傳默認資料

我的沙箱沙箱鏈接

應用程式.js

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

export default function App() {
  const [isselected, setisselected] = useState([]);

  const OnChange = (e) => {
    console.log(e.target.checked);
    const ischecked = e.target.checked;
    if (ischecked) {
      setisselected([...isselected, e.target.value]);
    } else {
      const index = isselected.indexOf(e.target.value);
      isselected.splice(index, 1);
      setisselected(isselected);
    }

    console.log(isselected);
  };

  useEffect(() => {
    console.log(isselected, "value selected");
  }, [isselected]);

  return (
    <div className="App">
      <span>
        Filters applied:{" "}
        {isselected.map((i) => (
          <span>{i}</span>
        ))}
      </span>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          value="Lastsevendays"
          name="last_seven"
          id="1"
          onChange={OnChange}
        />
        <label htmlFor="">Last 7 days</label>
      </div>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          name="last24"
          value="last_24"
          id="2"
          onChange={OnChange}
        />
        <label htmlFor="">Last 24 hours</label>

        <table>
          <thead>
            <tr>
              <th>Header1</th>
              <th>Header2</th>
              <th>Header3</th>
            </tr>
          </thead>
          <tbody>
            {
              !isselected.length ? DefaultData.filter(x => x === '3 days ago').map((item, index)=>{
                <tr>
                <td>{item.includes}</td>
                <td>{item.date_listed}</td>
                <td>{item.id}</td>
              </tr>
              }) : DefaultData.map((item, index) => {
                return (
                  <tr>
                    <td>{item.distance}</td>
                    <td>{item.date_listed}</td>
                    <td>{item.id}</td>
                  </tr>
                );
              })



            }
          </tbody>
        </table>
      </div>
    </div>
  );
}

uj5u.com熱心網友回復：

你真的從不應用你的過濾器，所以這就是它們不起作用的原因。

你的代碼應該是這樣的（這是 L71 上三元運算子的負分支）

DefaultData
  .filter(item => isSelected.includes(item.date_listed))
  .map((item) => (
    <tr key={item.id}>
      <td>{item.distance}</td>
      <td>{item.date_listed}</td>
      <td>{item.id}</td>
    </tr>
  )
)

uj5u.com熱心網友回復：

3件事：

1 - 你在你的onChange函式中犯了一個錯誤

您改變陣列isselected并將其作為引數發送到setisselected.

isselected.splice(index, 1);
  setisselected(isselected);

它被認為是與已經存在的值相同的物件isselected，因此它不會被更新。

你不應該直接改變這個陣列，而是操作一個淺拷貝并將它作為值發送。例如 ：

const newSelection = Array.from(isselected);
newSelection.splice(index, 1);
setisselected(newSelection);

2 - 你沒有正確過濾

DefaultData是一個具有date_listed要過濾的屬性的物件陣列，因此您可以這樣做：

DefaultData.filter(x => x.date_listed === '3 days ago')

3 - 括號括號不匹配

您在這里使用了括號而不是括號：

.map((item, index)=>(
            <tr>
            <td>{item.includes}</td>
            <td>{item.date_listed}</td>
            <td>{item.id}</td>
          </tr>
          ))

標籤：javascript 反应 下一个

上一篇：從物件陣列中排序資料并從JavaScript中的值推送資料

下一篇：如何使用javascript或html按鈕洗掉選定的表格行？