Функция в реакции не работает должным образом

Question

Я пытаюсь написать функцию, которая обрабатывает нажатие кнопки.Я хочу, чтобы что-то произошло:

1. Функция получает строку и изменяет состояние с именем «selectedGenre» на данную строку.

2. Когданажата определенная кнопка, она вызывает функцию и возвращает строку.

3. Строка / состояние "selectedGenre" сохраняется, поэтому я могу использовать ее позже в другом компоненте.

Это то, что я написал, но я думаю, что способ доставки строки после нажатия кнопки неправильный.

import React, { Component } from 'react';
import Genre from './Genre';
import './GenreSelectPage.css';
import Blues from '../Blues.png';
import Classical from '../Classical.png'; 
import Country from '../Country.png';


export default class GenreSelectPage extends Component{

    state = {
        chosenGenre: ""
    }

    handleClick = (genreName) => {
        this.setState({chosenGenre: genreName});
    } 


    render(){
        return(
        <div className = "GenreSelectPage">
        <h3>Select your desired Kollab Room Genre</h3>
        <Genre genrePicture= {Blues} genreClicked = {this.handleClick("blues")}/>
        <Genre genrePicture= {Classical} genreClicked = {this.handleClick("Classical")}/>
        <Genre genrePicture= {Country} genreClicked = {this.handleClick("Country")}/>
        )
      }
    }

Что я должен изменить, чтобы вызватьправильно функционировать и сохранить результат?

Answer 1

проблема в том, что this.handleClick("blues") выполняется во время рендеринга, возвращает неопределенное значение, похожее на genreClicked={undefined}, с побочным эффектом для расписания 3 асинхронно setState s ...

вы можете использовать фабрикуфункция, которая возвращает функцию-обработчик события с доступом к закрывающей переменной:

makeHandleClick = (genreName) => (event) => {
  this.setState({ chosenGenre: genreName });
  // console.assert(this.state.chosenGenre); // FYI: not possible, setState is async
}

render() {
  ...<Genre genrePicture={Blues} genreClicked={this.makeHandleClick("blues")} />