Блог

В настоящее время я пытаюсь реализовать в своем приложении компонент фильтра для фильтрации точек, отображаемых на карте, на основе выбора выпадающего списка. Ошибка возникает, когда я выбираю выбор из выпадающего меню, и это происходит в моем компоненте фильтра, который обрабатывает событие onChange для фильтрации данных в моем состоянии. Любая помощь будет принята с благодарностью!

App.js

 import React from 'react';
import Map from './components/Map/Map'
import Sidebar from './components/Sidebar/Sidebar'
import { useState, useEffect } from 'react';
import "./app.css"

function App() {

  const url = "/data"
  const [data, setData] = useState([])
  const [filteredData, setFilteredData] = useState([])

  useEffect(()=>{
    const fetchData = async () => {
      const jobs = await fetch(url)
      const jobsData = await jobs.json();
      setData(jobsData)
      setFilteredData(jobsData)
    }
    fetchData()
  },[])

  

  return (
    <div className="app">
      <Map data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
      <Sidebar data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}/>
    </div>
  );
}

export default App;
 

Sidebar.jsx

 import React from 'react';
import Filter from '../Filter/Filter';
import "./sidebar.css"

function Sidebar(data, setData, filteredData, setFilteredData) {
    
    return (
        <div  style = {{float: "right", height: "97vh", width: "30%"}} className="sidebar" >
            <h1>Job Filters</h1>
            <Filter data={data} setData={setData} filteredData={filteredData} setFilteredData={setFilteredData}>
            </Filter>
        </div>
    );
}

export default Sidebar;
 

Filter.jsx

 import React from 'react';
import "./filter.css"


export function Filter(data, setData, filteredData, setFilteredData) {

    const handleChangePriority = (e) =>{
        if(e.target.value === "all"){
            setFilteredData(data)
        }else{
            const result = [data].filter(job => job.priority === e.target.value)
            setFilteredData(result)
        }
    }

    const handleChangeStatus = (e) => {
        console.log(e.target.value)
    }
    return ( 
        <div className="wrapper">
            <div className="priority">
                <div className="box">
                    <h1>Priority: </h1>
                    <select className="priority-list" id="priority-list"  onChange={handleChangePriority}>
                        <option value="all">All</option>
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                    </select>
                </div>
            </div>
            <div className="status">
                <div className="box">
                    <h1>Status: </h1>
                    <select className="status-list" id="status-list" onChange={handleChangeStatus}>
                        <option value="all">All</option>
                        <option value="completed">Completed</option>
                        <option value="in-progress">In-Progress</option>
                        <option value="assigned">Assigned</option>
                        <option value="unassigned">Unassigned</option>
                    </select>
            </div>
            </div>
        </div>
    );
}

export default Filter;
 

Когда React вызывает вашу компонентную функцию, она передает props как объект. Когда вы видите именованные реквизиты в качестве аргументов функции компонента, они разрушаются.

Изменить

 export function Filter(data, setData, filteredData, setFilteredData)
 

Для

 export function Filter({data, setData, filteredData, setFilteredData})
 

и то же самое для компонента боковой панели.