Reactjs 使用react钩子搜索过滤器（useffect/useState）

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

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; 

import'/App.css'；
函数App（）{
const[datas，setDatas]=useState（[]）；
const[userid，setUserid]=useState（“”）；
常量输入更改=（事件）=>{
setUserid（event.target.value）
}
常量搜索栏=（）=>{
}
useffect（（）=>{
取（'https://api.github.com/search/repositories?q=react')
.then（response=>response.json（））
。然后（数据=>{
setDatas（data.items）
})
},[])
返回(
存储库
搜寻
名称
统一资源定位地址
{
数据映射（（数据，索引）=>
{data.full_name}
)
}
);
}
导出默认应用程序；

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

---

useffect

末尾有一个数组，当保留为空时，

useffect

中的内容只更新一次。您可以将变量添加到该数组中，以便在该变量更改时进行更新

这里您需要编写：

useffect（您的函数，[userid]）

阅读如何使用查询参数，然后使用上述方法更改搜索，而不是硬编码的

？q=react