如何过滤 React 下拉列表并更新页面以仅显示在下拉列表中单击的项目的表格？

Question

非常简单。我在我的网页上显示了一个表格（列表）以做出反应，并希望用户过滤表格以显示在下拉菜单中单击的内容。

我尝试了很多东西，花了几个小时在线观看视频。这是我的代码。我正在为过滤器创建一个状态，映射正确的项目“saleperson”数组，我也有 .includes(filterTerm) 在那里。我看不出我做错了什么。我的控制台出现模糊错误，所以这不是很有帮助。我是新手，所以我确定我犯了一些语法错误，但需要一些帮助。谢谢

import React, {useState, useEffect } from 'react';

function ListSalesHistory() {

  const [sales, setSales] = useState([])
  const [salespersons, setSalesPersons] = useState([])

  const [filterTerm, setFilterTerm] = useState("")

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  }

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  }

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord)
    }

  }

  useEffect(()=>{
    getData()
  }, [])

  useEffect(()=>{
    fetchData()
  }, [])

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSalesPersons(value);
}

  return (
    <div>
      <h1>Sales person history</h1>
      <select value={salespersons} onChange={handleSalesPersonChange} required id ="salesperson" name="salesperson" className="form-select form-select-lg form-select-padding-lg mb-3" >
        <option value="" onChange={handleFilterChange}>Choose a sales person</option>
        {salespersons
        .filter((saleperson) => saleperson.name.includes(filterTerm))
        .map(saleperson => {
          return(
            <option key={ saleperson.name } value={ saleperson.name }>
              { saleperson.name }
            </option>
          )
        })}
      </select>
      <table className="table table-striped">
      <thead>
        <tr>
          <th>Sales person</th>
          <th>Customer</th>
          <th>VIN</th>
          <th>Sale price ($)</th>
        </tr>
      </thead>
      <tbody>
        {sales.map(sale => {
          return(
            <tr key={ sale.id }>
              <td>{ sale.sales_person.name }</td>
              <td>{ sale.customer.name }</td>
              <td>{ sale.automobile.vin }</td>
              <td>{ sale.sales_price }</td>
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>

  )
}

export default ListSalesHistory;

Answer 1

编辑试试这个更新的代码这次它应该工作：

import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [salespersons, setSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    getData();
    fetchData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person.name === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {salespersons.map((saleperson) => (
          <option key={saleperson.name} value={saleperson.name}>
            {saleperson.name}
          </option>
        ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Sales person</th>
            <th>Customer</th>
            <th>VIN</th>
            <th>Sale price ($)</th>
          </tr>
        </thead>
        <tbody>
          {filteredSales.map((sale) => (
            <tr key={sale.id}>
              <td>{sale.sales_person.name}</td>
              <td>{sale.customer.name}</td>
              <td>{sale.automobile.vin}</td>
              <td>{sale.sales_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ListSalesHistory;

Answer 2

import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [filteredSalespersons, setFilteredSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setFilteredSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    fetchData();
    getData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {filteredSalespersons
          .filter((saleperson) =>
            saleperson.name.toLowerCase().includes(filterTerm.toLowerCase())
          )
          .map((saleperson) => (
            <option key={saleperson.name} value={saleperson.name}>
              {saleperson.name}
            </option>
          ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      {sales.length > 0 && (
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Sales person</th>
              <th>Customer</th>
              <th>VIN</th>
              <th>Sale price ($)</th>
            </tr>
          </thead>
          <tbody>
            {filteredSales.map((sale) => (
              <tr key={sale.id}>
                <td>{sale.sales_person.name}</td>
                <td>{sale.customer.name}</td>
                <td>{sale.automobile.vin}</td>
                <td>{sale.sales_price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default ListSalesHistory;

一些小改动，我希望它有效