无法让我的 defaultAuto 状态像我的 defaultData 状态一样过滤

Question

React/redux - 我有两个 JSON 文件加载到我的商店中。我正在尝试在与 id 相关的搜索栏下方放置一个自动完成 div。该 id 会给我一个搜索词，我可以使用函数来完成搜索查询 queryAutoComplete()。由于某些奇怪的原因，<SearchBar /> 中的 querySuggestion 与使用 defaultAuto 的方式与使用 defaultData 的方式不同，我不明白为什么。我控制台记录它们，我看到了这些对象。我不断收到错误，包括不是我的数组的函数...

//ConfigureStore
import { createStore } from 'redux';
import { Reducer, initialState } from './reducer';

export const ConfigureStore = () => {
    const store = createStore(
        Reducer, 
        initialState
    )

    return store
    
    

//Reducers
import Data from '../Shared/data.json'
import Suggestion from '../Shared/suggestions.json'

export const initialState = {
    data: Data,
    suggestion: Suggestion
}

export const Reducer = (state = initialState, action) => {
    return state
}




//App.js
import React from "react";
import "./App.css";
import Main from "./Components/Main"
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { ConfigureStore } from './redux/configureStore'

const store = ConfigureStore()

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div className="App">
          <Main />
        </div>
      </BrowserRouter>
    </Provider>
  );
}

export default App;

import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import 'bootstrap/dist/css/bootstrap.min.css'
import RenderGrid from './RenderGrid'
import SearchBar from './SearchBar'
import { Header } from "./Header";
import { Footer } from "./Footer";


const Main = () => {
    const [defaultAuto, setDefaultAuto] = useState()
    const [defaultData, setDefaultData] = useState()

    const [search, setSearch] = useState("")
    const [results, setResults] = useState([])
    const [sugg, setSugg] = useState([])
    
    const data = useSelector(state => state.data)
    const suggestion = useSelector(state => state.suggestion)
    
    
    useEffect(() => {
        const createData = () => {
            setDefaultData(data)
            setDefaultAuto(suggestion)
        }
        return createData()
    }, [data, suggestion])  
   
    return (
        <div>
            <Header />
            <SearchBar 
            placeholder="What do you identify as?" 
            defaultData={defaultData} //JSON data for Grid
            defaultAuto={defaultAuto} // JSON data for auto-complete box
            search={search} 
            setSearch={setSearch} 
            setResults={setResults} 
            sugg={sugg} 
            setSugg={setSugg} />
            <RenderGrid results={results} />                
            <Footer />
        </div>
    )
    
    
}
export default Main

import React from "react";
import Suggestion from "./Suggestion";
import { BiSearchAlt } from "react-icons/bi";
import { RiCloseCircleLine } from "react-icons/ri";
import "bootstrap/dist/css/bootstrap.min.css";

const SearchBar = ({
  placeholder,
  search,
  setResults,
  setSearch,
  defaultData,
  sugg,
  setSugg,
  defaultAuto
  }) => {
    const querySuggestion = (e) => {
      setSearch(e.target.value)
      console.log(defaultAuto)
      const filteredSuggg = defaultAuto.filter((auto) => {
        return (
        auto.eth.toLowerCase().includes(search.toLowerCase()) ||
        auto.gen.toLowerCase().includes(search.toLowerCase()) ||
        auto.iden.toLowerCase().includes(search.toLowerCase())
        )
        })
        setSugg(filteredSuggg)
        console.log(sugg)
    };
// query logic for enter key and suggestion click
    const queryAutoComplete = (e) => {
      const filteredSearch = defaultData.filter((data) => {
        return (
          data.eth.toLowerCase().includes(search.toLowerCase()) ||
          data.gen.toLowerCase().includes(search.toLowerCase()) ||
          data.iden.toLowerCase().includes(search.toLowerCase())
        )
      })
      setResults(filteredSearch)
      setSugg([])
    };

    const queryJson = (e) => {
      if (e.key === "Enter") {
        const filteredSearch = defaultData.filter((data) => {
          return (
            data.eth.toLowerCase().includes(search.toLowerCase()) ||
            data.gen.toLowerCase().includes(search.toLowerCase()) ||
            data.iden.toLowerCase().includes(search.toLowerCase())
          );
        });
        setResults(filteredSearch);
      }
    };

    const clearInput = () => {
      setResults([])
      setSearch("")
      setSugg([])
    };

    return (
      <div className="wrapper">
        <div className="search-input">
          <input
            type="text"
            placeholder={placeholder}
            value={search}
            onChange={querySuggestion}
            onKeyPress={queryJson}
          />
          <Suggestion 
          search={search} 
          sugg={sugg} 
          setSugg={setSugg} 
          queryAutoComplete={queryAutoComplete} 
          />

          <div className="searchIcon">
            {search.length > 0 ? (
              <RiCloseCircleLine
                icon="fa-solid fa-times-circle"
                className="icon"
                onClick={clearInput}
              />
            ) : (
              <BiSearchAlt icon="fa-solid fa-search" className="icon" />
            )}
          </div>
        </div>
      </div>
    );
};
export default SearchBar;

import React, { useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const Suggestion = ({ search, sugg, queryAutoComplete }) => {


  
  const suggestionArray = sugg.map((arr) => (
      <div key={arr.id} onClick={() => queryAutoComplete()}>
        <li className="col-12">{arr.gen||arr.iden||arr.eth}</li>
      </div>
    ))

  useEffect(() => {
    const querySugg = () => {
      if (search.length > 0) {
        console.log("QuerySugg fired!!")
        console.log(search)
      }
    };
    querySugg()
  }, [search])
  console.log(sugg)
  
  return (
    <div className="container">
      {suggestionArray}
    </div>
  )
}
export default Suggestion

// data.json
[
  {
    "id": "61b3af7514270baddf9f5487",
    "eth": "Guatemalan",
    "gen": "male",
    "iden": "gay",
    "title": "Officia incididunt.",
    "about": "Incididunt cupidatat irure deserunt in et.",
    "img": "../public/img/test_img.jpg",
    "char": 3,
    "set": "Eden",
    "firstN": "Shauna",
    "lastN": "Greer",
    "email": "amet@gmail.com",
    "bio": "Irure consectetur voluptate in sint. Fugiat fugiat dolore esse occaecat pariatur amet. Dolor Lorem deserunt in. Esse adipisicing occaecat mollit magna amet aute amet. Elit est sint nostrud ad exercitation aute. Ut aliquip excepteur do dolor irure. Magna dolore laborum consectetur commodo veniam eiusmod veniam."
  },
  {
    "id": "61b3af75e6902e7ad64f378b",
    "eth": "Cuban",
    "gen": "trans",
    "iden": "lesbian",
    "title": "Non sint dolor ad fugiat nisi.",
    "about": "Fugiat culpa ullamco adipisicing labore voluptate.",
    "img": "../public/img/test_img.jpg",
    "char": 3,
    "set": "Accoville",
    "firstN": "Annmarie",
    "lastN": "Frye",
    "email": "veniam@gmail.com",
    "bio": "Excepteur sint nulla mollit laboris esse consequat. Reprehenderit amet amet commodo mollit anim duis anim. Nulla proident dolore ipsum Lorem anim. Ut aute Lorem tempor. Cupidatat minim duis labore fugiat consequat. Dolore ea velit et ut incididunt occaecat duis. Ad Lorem dolore excepteur esse elit."
  }, //etc total: 100 objects

//submissions.js
[
    {
        "id": 1,
        "eth": "puerto rican"
    },
    {
        "id": 2,
        "eth": "mexican"
    },
    {
        "id": 3,
        "eth": "dominican"
    },
    {
        "id": 4,
        "eth": "cuban"
    },
    {
        "id": 5,
        "eth": "chilean"
    },
    {
        "id": 6,
        "eth": "brazilian"
    },
    {
        "id": 7,
        "eth": "salvadoran"
    },
    {
        "id": 8,
        "eth": "guatemalan"
    },
    {
        "id": 9,
        "eth": "colombian"
    },
    {
        "id": 10,
        "gen": "male"
    },
    {
        "id": 11,
        "gen": "female"
    },
    {
        "id": 12,
        "gen": "non-binary"
    },
    {
        "id": 13,
        "gen": "trans"
    },
    {
        "id": 14,
        "iden": "straight"
    },
    {
        "id": 15,
        "iden": "bi"
    },
    {
        "id": 16,
        "iden": "gay"
    },
    {
        "id": 17,
        "iden": "lesbian"
    }
    
]

Answer 1

似乎defaultAuto 包含eth、gen 或iden。 所以你需要修改一下querySuggestion函数：

const querySuggestion = e => {
  setSearch(e.target.value);
  console.log(defaultAuto);
  const filteredSuggg = defaultAuto.filter(auto => {
    return (
      (auto.eth ||auto.gen || auto.iden).toLowerCase().includes(search.toLowerCase())
    );
  });
  setSugg(filteredSuggg);
  console.log(sugg);
};