使用反应钩子搜索过滤器（useEffect / useState）

Question

我正在尝试创建一个搜索栏。 当我在输入中输入某个值时，我希望 github api 中的列表项与 searchBar 上的值一起重新列出。

import './App.css';

function App() {

  const [datas, setDatas] = useState([]);
  const [userid, setUserid] = useState('');
  
  const inputChanged = (event) => {
    setUserid(event.target.value)
  }

  const searchBar = () => {

  }

  useEffect(() => {

    fetch('https://api.github.com/search/repositories?q=react')
    .then(response => response.json())
    .then(data => {
      setDatas(data.items)
    })
  },[])
  return (
    <div className="App">
      <h1>Repositories</h1>
        <input id="searchInput"type="text" placeholder="search" name="search" value={userid} onChange={inputChanged}/>
        <button onClick={searchBar}>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 href={data.html_url}>{data.html_url}</a></td>
           </tr>
          )
        
          }
        </tbody>
      </table>
    </div>
  );
}

export default App; 

这是我的代码和本地主机的图像

Answer 1

useEffect 末尾有一个数组，当为空时 useEffect 中的内容只更新一次。您可以向该数组添加变量，以便在该变量更改时进行更新。

这里需要写：useEffect(your function,[userid]);