使用Reactjs单击显示按钮时如何渲染滤过国家？

Question

I am new to reactjs. I am trying to implement a search filter for countries from this Json server using axios.get() . If the filter array contains only 1 country then my application works fine otherwise if the filter array contains more than 1 but less than 10 countries I want to output this result. I am able to successfully achieve the filter part on my browser but when I click on "show" button it only outputs on the console.

Here's my code :

const ShowBetween1to10 = ({country, buttonHandler}) => {
  return(
    <div key={country.alpha2Code}>
      <p>
        {country.name}
        <button onClick = {buttonHandler}>show</button>
      </p>
    </div>
  )

}

const App = () => {
  const [countries,setCountries] = useState([])
  const [filter,setFilter] = useState('')
  //const [flag, setFlag] = useState('')

  useEffect(() =>{
    axios.get('https://restcountries.eu/rest/v2/all')
    .then(response => setCountries(response.data))
  }, [])

  //console.log('countries[] = ',countries)

  const buttonHandlerOf = (alpha2Code) => {
    const url = `https://restcountries.eu/rest/v2/alpha/${alpha2Code}`

    return (axios.get(url).then(response =>{
      console.log(response.data)
      console.log(response.data.languages)
      return(
        <div>
          {view(response.data)}
        </div>
      )})
    )
  }

  const view = (country) =>{
    //console.log(country.languages)
    const lang = country.languages.map(lang => lang.name)
    console.log(lang)
    return(
      <div>
            <h1>{country.name}</h1>
            <h2>languages</h2>
            <ul>{printLanguages(lang)}</ul>
            <img src={country.flag}  alt="flag photo" height="100" width="100"/>
      </div>
    ) 
  }
  const rows = () => {
    const len = countriesToShow.length 
    if(len > 10){
      return(<p>Too many matches, specify another filter</p>)
    }
    else if(len >=1 && len <= 10){
      if(len === 1){
        const country = countriesToShow[0];
        return(
          <div>
            {view(country)}
          </div>
        )
      }
      else{
        return(countriesToShow.map(country => 
          <ShowBetween1to10 
           key ={country.alpha2Code}
           country = {country}
           buttonHandler = {() => buttonHandlerOf(country.alpha2Code)}
          />  
        ))
      }

    }


  }
  const handleFilterChange = (event) => {
    setFilter(event.target.value)
  }
  const countriesToShow = filter === '' ? [] : countries.filter(country =>  {
    return country.name.toLowerCase().includes(filter.toLowerCase())
  })
  return(
    <div>
      find countries
      <input value={filter} onChange={handleFilterChange} />
      {rows()}
    </div>
  )
}

export default App;`

If anybody can help me I'll be grateful of you. Start looking from the else if(len >1 && len <10) part of rows() function and please explain why view() is not rendering on the browser but only on the console ? Thanks a heap !!!

Answer 1

Your buttonHandlerOf is incorrect. You can't render a view from it. Generally you'd need to set the response data to state, which would be then rendered.

Also I'd recommend you to make those view functions that return JSX into separate React components.

 const buttonHandlerOf = alpha2Code => {
    const url = `https://restcountries.eu/rest/v2/alpha/${alpha2Code}`;

    return axios.get(url).then(response => {
      console.log(response.data);
      console.log(response.data.languages);
      setCountries([response.data]) // set the country to the state here
    });
  };

As pointed in the comments, this would remove all other countries, so you could fetch them again when the filter is cleared:

 useEffect(() => {
    if (!filter) {
      axios
        .get("https://restcountries.eu/rest/v2/all")
        .then(response => setCountries(response.data));
    }
  }, [filter]);

Alternatively you could add a reset button.