reactjs - 如何仅在输入中搜索时显示数据？

Question

我正在学习 React，并正在制作一个简单的应用程序，允许用户通过 api 搜索国家/地区。 我已成功获取 api 并将其设置为某种状态，并创建了一个用于在文本输入中进行搜索的过滤器组件。 但是，我想在用户输入搜索输入之前不显示任何内容，然后显示与输入的字母匹配的国家/地区。 最常用的方法是什么？

const App = () => {
  const [countries, setCountry] = useState([]) 
  const [search, setSearch] = useState('')


  useEffect(() => {
    console.log('effect')
    axios
    .get(`https://restcountries.eu/rest/v2/all`)
    .then(response => {
      console.log(response,'promise fulfiled')
      setCountry(response.data)
    })
  }, [])

  const handleSearch = (e) => {
    setSearch(e.target.value)
  }

  const filter = countries.filter(country =>
    country.name.toLowerCase().includes(search.toLowerCase()) 
    );


  return (
    <div className="App">
    Search Country: 
    <input type='text' onChange={handleSearch}/>
    <Country filter={filter} />
    </div>
  );
}

const Country = ({filter}) => {
    return(
        <ul style={{listStyle: 'none'}}>
        {
        filter.map(country =>
          <li key={country.name}>
            {country.name}
          </li>)
        }
      </ul>
    )

这是当前代码，但它显示了 API 中的所有国家/地区。我想在用户在输入框中键入内容之前不显示任何国家/地区。 谢谢。

Answer 1

只需对 <Country /> 进行条件渲染即可.

仅显示国家/地区列表，如果 search已提供。

{ search && <Country filter={filter} /> }

Demo