Javascript 带有React.js的用户搜索过滤器

在使用fetch（api）时，我设置了[search]。 每次我在输入框中键入内容时，都会显示“正在加载…”，我必须单击该框才能键入下一个单词/数字

我想知道我怎样才能避免它，这样我就可以不必选择框就可以继续打字了

我有JSON数据，用户名是“login”。 如果我能得到帮助，我将不胜感激

App.js文件：

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

function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');

  useEffect(() => {
    if(!search) {
      return;
    }
    setLoading(true);

    fetch(`https://api.github.com/search/users?q=${search}`)
      .then(res => res.json())
      .then(res => {
        console.log(res)
        setUsers(res.items);
        setLoading(false);
      })
      .catch(err => {
        console.log(err);
      });
  }, [search]); // every time search changes, we call the fn

  if(loading) {
    return <p>Loading...</p>
  }

  return(
    <div>
      <h1>Github user searcher</h1>
      <input
        type="text"
        placeholder="Search"
        onChange={e => setSearch(e.target.value)}
        value={search}
      />

      {users.map((user, name) => (  // {}you have ti return inthis fn, () using this return directly
        <UserDetails
          key={name}
          {...user}
        />
      ))}

    </div>
  )

};

export default App;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/UserDetails”导入UserDetails
函数App（）{
const[users，setUsers]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[search，setSearch]=useState（“”）；
useffect（（）=>{
如果（！搜索）{
返回；
}
设置加载（真）；
取回(`https://api.github.com/search/users?q=${search}`）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
设置用户（res.items）；
设置加载（假）；
})
.catch（错误=>{
控制台日志（err）；
});
}，[search]）；//每次搜索更改时，我们都会调用fn
如果（装载）{
返回加载

}
返回(
Github用户搜索器
setSearch（e.target.value）}
值={search}
/>
{users.map（（user，name）=>（//{}您在这个fn，（）中直接使用这个返回
))}
)
};
导出默认应用程序；

UserDetails.js文件：

import React from "react"

function UserDetails(props) {
  return(
    <div>
      {props.login}
    </div>
  )
}

export default UserDetails

从“React”导入React
功能用户详细信息（道具）{
返回(
{props.login}
)
}
导出默认用户详细信息
>P>作为解决方案，您可以考虑在搜索时不隐藏搜索输入。比如：

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

function App() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)
  const [search, setSearch] = useState('')

  useEffect(() => {
    if (!search) {
      return
    }

    setLoading(true)

    const abortController = new AbortController()

    fetch(`https://api.github.com/search/users?q=${search}`, {
      signal: abortController.signal,
    })
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        setUsers(res.items)
        setLoading(false)
      })
      .catch((err) => {
        console.log(err)
      })

    // Abort previously created Fetch request
    // if search param has been changed in order
    // not to overload server with redundant requests
    return () => {
      abortController.abort()
    }
  }, [search]) // every time search changes, we call the fn

  return (
    <div>
      <h1>Github user searcher</h1>
      <input
        type="text"
        placeholder="Search"
        onChange={(e) => setSearch(e.target.value)}
        value={search}
      />

      {loading && <p>Loading...</p>}

      {!loading &&
        users.map((
          user,
          name // {}you have ti return inthis fn, () using this return directly
        ) => <UserDetails key={name} {...user} />)}
    </div>
  )
}

export default App

import React，{useState，useffect}来自“React”
导入“./App.css”
从“./UserDetails”导入UserDetails
函数App（）{
const[users，setUsers]=useState（[]）
常量[loading，setLoading]=useState（false）
const[search，setSearch]=useState（“”）
useffect（（）=>{
如果（！搜索）{
返回
}
设置加载（真）
const abortController=新的abortController（）
取回(`https://api.github.com/search/users?q=${search}`{
信号：abortController.signal，
})
.然后（（res）=>res.json（））
。然后（（res）=>{
console.log（res）
设置用户（res.items）
设置加载（错误）
})
.catch（（错误）=>{
console.log（错误）
})
//中止先前创建的提取请求
//如果已按顺序更改搜索参数
//不使用冗余请求使服务器过载
return（）=>{
abortController.abort（）
}
}，[search]）//每次搜索更改时，我们都会调用fn
返回(
Github用户搜索器
setSearch（e.target.value）}
值={search}
/>
{加载和加载…
}
{！正在加载&&
users.map((
用户，
name/{}您在这个fn，（）中直接使用这个返回返回
) => )}
)
}
导出默认应用程序

您还可以考虑在 REF的帮助下设置焦点，但是闪烁的搜索框可能会提供令人不快的用户体验。
UPD
我用中止冗余请求更新了示例代码段。
简单的解决方案是取消对setSearch的影响，这样它只会在用户停止键入后执行搜索（延迟执行）

import React，{useState，useffect}来自“React”；
导入“/App.css”；
从“/UserDetails”导入UserDetails
函数解盎司（回调，等待）{
让超时
返回（…参数）=>{
const context=this
clearTimeout（超时）
timeout=setTimeout（（）=>callback.apply（上下文，参数），等待）
}
}
函数App（）{
const[users，setUsers]=useState（[]）；
const[loading，setLoading]=useState（false）；
const[search，setSearch]=useState（“”）；
//这将创建一个新函数，该函数在200毫秒内未调用时将执行setSearch
常数去BouncedSetSearch=去Bounce（…args）=>setSearch（…args），200；
useffect（（）=>{
如果（！搜索）{
返回；
}
设置加载（真）；
取回(`https://api.github.com/search/users?q=${search}`）
.then（res=>res.json（））
。然后（res=>{
console.log（res）
设置用户（res.items）；
设置加载（假）；
})
.catch（错误=>{
控制台日志（err）；
});
}，[search]）；//每次搜索更改时，我们都会调用fn
如果（装载）{
返回加载

}
返回(
Github用户搜索器
去BouncedSetSearch（e.target.value）}
值={search}
/>
{users.map（（user，name）=>（//{}您在这个fn，（）中直接使用这个返回
))}
)
};
导出默认应用程序；
我使用了setTimeout。它也起作用了

这是因为您正在设置
加载
true。随着输入的变化。它设置
true
和
false
。当用户输入时，您想要什么？是的@ShubhamVerma是对的，每次您输入内容时，
搜索
都会被修改，因此会调用您的效果，您
设置加载（true）
，它会销毁您的所有输入、用户详细信息等，并挂载
p
标记。然后在
setLoading（false）
之后，一个新的输入被装入=你失去了焦点。@ShubhamVerma谢谢你。@Chalisi谢谢你。此外，我会
debounce
效果，用
setTimeout
和
cleartimout
很容易做到。编辑后：有趣的是，中止的事情
axios
为感兴趣的人提供了类似的机制
cancelToken
。
import React, {useState, useEffect} from "react";
import './App.css';
import UserDetails from "./UserDetails"

function debounce(callback, wait) {
  let timeout
  return (...args) => {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => callback.apply(context, args), wait)
  }
}

function App() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState('');
  // this will create a new function that will execute setSearch when it wasn't called for 200 ms
  const debouncedSetSearch = debounce((...args) => setSearch(...args), 200);

  useEffect(() => {
    if(!search) {
      return;
    }
    setLoading(true);

    fetch(`https://api.github.com/search/users?q=${search}`)
      .then(res => res.json())
      .then(res => {
        console.log(res)
        setUsers(res.items);
        setLoading(false);
      })
      .catch(err => {
        console.log(err);
      });
  }, [search]); // every time search changes, we call the fn

  if(loading) {
    return <p>Loading...</p>
  }

  return(
    <div>
      <h1>Github user searcher</h1>
      <input
        type="text"
        placeholder="Search"
        onChange={e => debouncedSetSearch(e.target.value)}
        value={search}
      />

      {users.map((user, name) => (  // {}you have ti return inthis fn, () using this return directly
        <UserDetails
          key={name}
          {...user}
        />
      ))}

    </div>
  )

};

export default App;