Как связать параметры в функции setState () React hooks?

Question

У меня есть список названий стран, и при нажатии на одну из стран состояние выбранной страны должно обновляться с названием вновь выбранной страны. Затем это состояние вызывает другие изменения в useEffect(). Состояние pickedCountry обрабатывается в родительском компоненте, но функция setPickedCountry() передается дочернему компоненту (который создает список стран) как опора.

Когда я теперь добавляю onPress={props.setCountry.bind(this, country.name)} для каждого из элементов списка я получаю предупреждение:

Предупреждение: обновления состояния из хуков useState () и useReducer () не поддерживают второй аргумент обратного вызова. Чтобы выполнить побочный эффект после рендеринга, объявите его в теле компонента с помощью useEffect ().

Прямо сейчас я не знаю, как useEffect поможет мне здесь. Может ли кто-нибудь мне помочь?

Это мои компоненты:

Данные страны

[
    {
        "name": "Germany",
        "data": [*SOME DATA*]
    },
    {
        "name": "France",
        "data": [*SOME DATA*]
    }, ...
]

Родительский компонент

const [pickedCountry, setPickedCountry] = useState(null);

useEffect(() => {
    if (pickedCountry!= null) {
      //Do Something
    }    
  }, [pickedCountry]);

return (
    <Child setPickedCountry={setPickedCountry} />
);

Дочерний компонент

const [child, setChild] = useState([]);

useEffect(() => {
    const myComponents= [];
    for (country of myData) {
        myComponents.push(
            <TouchableOpacity 
                onPress={props.setCountry.bind(this, country.name)} />
        )
    }
    setChild(myComponents);
}, [someProps];

return (
    {child.map((x) => x)}
)

Answer 1

Функциональные компоненты не имеют экземпляров, поэтому this в любом случае не требует привязки. Похоже, вы просто хотите передать название страны в качестве нового значения состояния, например onPress={() => props.setCountry(country.name)}.

useEffect(() => {
  const myComponents= [];
  for (country of myData) {
    myComponents.push(<TouchableOpacity onPress={() => props.setCountry(country.name)} />)
  }
  setChild(myComponents);
}, [someProps];

Или создать обработчик каррированной функции, чтобы был определен и передан только один обработчик. Название страны, сохраненное в приложении.

useEffect(() => {
  const myComponents= [];
  const onPressHandler = name => () => props.setCountry(name);
  for (country of myData) {
    myComponents.push(<TouchableOpacity onPress={onPressHandler(country.name)} />)
  }
  setChild(myComponents);
}, [someProps];