时间戳

首页 > 解决方案 > 反应中的功能无法按预期工作

javascript - 反应中的功能无法按预期工作

问题描述

我正在尝试编写一个处理按钮单击的函数。我希望事情发生：

  1. 该函数获取一个字符串并将名为“chosenGenre”的状态更改为给定的字符串。

  2. 单击某个按钮时，它会调用该函数并返回一个字符串。

  3. 字符串/状态“chosenGenre”已保存，因此我可以稍后在另一个组件中使用它。

这是我写的，但我认为单击按钮后传递字符串的方式不正确。

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")}/>
        )
      }
    }

为了以正确的方式调用函数并保留结果，我应该改变什么？

标签： javascriptreactjsreact-props

解决方案

问题是this.handleClick("blues")在渲染期间执行的，它返回未定义的，类似于，具有调度 3 个异步sgenreClicked={undefined}的副作用...setState

你可以使用一个工厂函数，它返回一个可以访问闭包变量的事件处理函数：

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")} />

推荐阅读