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

我正在学习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-App=（）=>{
const[countries，setCountry]=useState（[]）
const[search，setSearch]=useState（“”）
useffect（（）=>{
console.log（'effect'））
axios
.得到(`https://restcountries.eu/rest/v2/all`)
。然后（响应=>{
日志（响应，“承诺履行”）
setCountry（response.data）
})
}, [])
常量handleSearch=（e）=>{
设置搜索（如目标值）
}
常量筛选器=国家/地区。筛选器（国家/地区=>
country.name.toLowerCase（）.includes（search.toLowerCase（））
);
返回(
搜索国家：
);
}

const Country=（{filter}）=>{
返回(

{
filter.map（国家=>

{country.name}
）
}

)

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

---

谢谢。

只需对

进行条件渲染即可

仅当提供了

search

时才显示国家/地区列表

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

{search&&}

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