使用 useEffect 的 searchFilter

Question

这是我们大学的任务。我尝试添加 useEffect 来改进我的小型玩具项目，使其具有 searchFilter 但它说

TypeError：无法读取未定义的属性“过滤器”

关于 useEffect/setSearchFilter 部分

这是这个问题之前的情况。 持有这个问题超过 2 天，我为这个问题感到灾难

/[错误图片][1]

谁能帮我解决这个问题？

import React, { useState, useEffect } from 'react'
import './App.css';

function App() {
  const [datas, setDatas] = useState([]);
  const [userid, setUserid] = useState('');
  const [searchFilter, setSearchFilter] = useState('');
  const inputChanged = (event) => {
    setUserid(event.target.value)
  }
  useEffect(() => {
    fetch('https://api.github.com/search/repositories?q=react')
    .then(response => response.json())
    .then(data => {
      setDatas(data.items)
    })
  },[])
  useEffect(() => {
    setSearchFilter(
      datas.full_name.filter((result) =>
        result.name.toLowerCase().includes(userid.toLowerCase())
      )
    );
  }, [userid, searchFilter]);
  return (
    <div className="App">
      <h1>Repositories</h1>
        <input 
          id="searchInput"
          type="text" 
          placeholder="search" 
          name="search" 
          value={userid} 
          onChange={inputChanged}
        />
        <button onClick={(e) => setSearchFilter(e.target.value)}>Search</button>
      <table>
        <tbody>
          <tr>
           <th>Name</th>
           <th>URL</th>
          </tr>
          {datas.map((data, index) => 
           <tr key={index}>
             <td>{data.full_name}</td>
             <td><a 
                    target="_blank" 
                    href={data.html_url}
                    >
                      {data.html_url}
                  </a>
            </td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
export default App;```



https://stackoverflow.com/questions/67761971/searchfilter-with-using-react-hookuseeffect-usestate/67762090#67762090





  [1]: https://i.stack.imgur.com/RuubM.png

Answer 1

如果您想过滤 full_name，这应该可以代替您的第二个 useEffect 挂钩。

useEffect(() => {
    setSearchFilter(
        datas.filter((result) =>
            result.full_name.toLowerCase().includes(userid.toLowerCase())
        )
    );
}, [userid, searchFilter]);

Answer 2

1. 您需要根据“full_name”参数过滤数据数组 - 因此您对数组运行 filter() 函数。
2. 如果您按用户身份进行过滤，则不需要搜索按钮 打字（因为您使用的是 useEffect）

代码如下：

import React, { useState, useEffect } from 'react'
import './App.css';

function App() {
  const [data, setData] = useState([]);
  const [userID, setUserID] = useState('');
  const [searchResults, setSearchResults] = useState([]);


  //Fetch data when mounted
  useEffect(() => {
    fetch('https://api.github.com/search/repositories?q=react')
    .then(response => response.json())
    .then(data => {
      setData(data.items)
    })
  },[])

  useEffect(() => {
      let result = data.filter((d) =>
      d.full_name.toLowerCase().includes(userID.toLowerCase())
    )
    setSearchResults(result);
  }, [userID, data]);


  const inputChanged = (event) => {
    setUserID(event.target.value)
  }
  
  
  return (
    <div className="App">
      <h1>Repositories</h1>
        <input 
          id="searchInput"
          type="text" 
          placeholder="search" 
          name="search" 
          value={userID} 
          onChange={inputChanged}
        />
        {/* No need for search button if searching using input (useEffect will trigger when typed) 
        <button onClick={search}>Search</button> */}
      <table>
        <tbody>
          <tr>
           <th>Name</th>
           <th>URL</th>
          </tr>
          {searchResults.map((data, index) => 
           <tr key={index}>
             <td>{data.full_name}</td>
             <td><a 
                    target="_blank" 
                    href={data.html_url}
                    >
                      {data.html_url}
                  </a>
            </td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
export default App;

理想情况下，您应该同时处理加载状态和错误状态。