更新组件不起作用 ReactJs

Question

请我在这里需要一点帮助，因为我被困住了。 我是新手，我正在创建一个组件，该组件从后端获取可用语言列表并将它们显示到下拉列表中，然后，一旦用户选择一种语言，该组件就应该更新以显示所选语言.

我面临的问题是我不知道为什么，但是当页面加载或选择新语言时，handleClick 方法被执行了三次（我有三种可用的语言）。因此，无论我选择哪种语言，列表中的最后一种语言始终显示为已选择。

如果您能快速浏览一下并告诉我您是否发现了可能导致这种奇怪行为的东西，我将不胜感激，因为这让我发疯了。

代码下方：

import React from 'react';

class LocaleSwitcher extends React.Component {


constructor() {
    super();
    this.render = this.render.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.state = {languages: [],selectedLocale:'En'};
    //This is only printed once
    console.log('constructor called');

}

handleClick(locale) {
    this.state.selectedLocale=locale;
    // This is printed three times, 
    // whenever I select a locale or when the page is loaded,why?????
    console.log('Selected Locale:' + locale);
}

render() {

    var component = this;
    component.selectedLanguage = this.props.defaultLanguage;
    return (<li>{this.state.selectedLocale}
        <ul className="dropdown">
            {
                this.state.languages.map(function (result, i) {
                    var url = "data/translations?locale=" + result.text;
                    return (<li key={i}><a onClick={component.handleClick(result.text)} href="#">{result.text}</a>
                    </li>);
                })

            }
        </ul>
    </li>);

}

componentDidMount() {
    var component = this;
    $.get('data/languages', function (result) {
        component.setState({languages: result});
    });
}


};



export class LocaleCurrencySwitcher extends React.Component {

render() {
    return (<ul className="switchers">
        <LocaleSwitcher defaultLanguage="En"/>
    </ul>);
}

};

Answer 1

问题是您实际上是在调用handleClick 方法，而不是将函数作为回调分配给onClick 属性。您应该从方法中删除括号，而是将文本作为参数传递。

onClick={component.handleClick.bind(null, result.text)}

在您的情况下，handleClick 方法被调用而不是被用作回调。