Передача значений в событие нажатия кнопки

Question

У меня проблемы с передачей значений между событием нажатия кнопки и функцией-обработчиком события setState.

У меня есть следующий код:

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import CountryDetail from './components/countryDetail'
import Filter from './components/filter'

const App = () => {
  const [ countries, setCountries] = useState([])
  const [ search, setSearch ] = useState("")
  const [ countryDetail, setCountryDetail] = useState([])

  useEffect(() => {
    console.log('effect')
    axios
      .get('https://restcountries.eu/rest/v2/name/' + search)
      .then(response => {
        console.log('promise fulfilled')
        setCountries(response.data)
      })
  }, [search])
  console.log({countries})

  const handleSearch = (event) => {
    setSearch(event.target.value);
    console.log(countries.length)
    }

  const handleShow = (country) => {
    setCountryDetail(country)
    console.log({countryDetail})
  }

  if (countries.length === 1) {
    return (
      <div>
        <Filter search = {search} handleSearch = {handleSearch}/>
        <CountryDetail countries={countries[0]}/>
      </div>
    )
    }
    return (
      <div>
        <Filter search = {search} handleSearch = {handleSearch}/>
        <h2>Countries</h2>
          <div>
            {countries.map((country) => (
              <div key={country.alpha3Code}>
                <p>{country.name} <button onClick={handleShow}> Show </button></p>
              </div>
            ))}
          </div>
      </div>
  )
}

export default App

При поиске страны возвращается массив. Я пытаюсь сделать setCountryDetail при нажатии кнопки, связанной с определенной страной. В свою очередь, countryDetail будет использоваться для отображения дополнительных сведений о конкретной стране.

Любые советы или рекомендации будут с благодарностью!

Answer 1

Я думаю, вы хотите реализовать что-то вроде этого

React js onClick не может передать значение методу

Попробуйте onClick = {() => handleShow (страна)}

Answer 2

Обработчики

onClick ожидают, что их аргумент будет событием, которое в данном случае является щелчком. Когда вы пишете

  const handleShow = (country) => {
    setCountryDetail(country)
    console.log({countryDetail})
  }

Вы устанавливаете страну для события клика. Даже если вы написали функцию как const handleShow = country =>, она читается как const handleShow = event of the onClick =>. Вам нужно передать детали страны в вашем ClickHandler немного по-другому. Вместо того, чтобы просто сказать onClick={handleShow}, вы можете передать функцию обратного вызова:

<button onClick={ () => {handleshow(country)} }> Show </button>

Теперь ваша функция handleShow является не функцией события, а скорее переменной страны.