javascript - 更新组件不起作用 ReactJs

Question

拜托，我需要一点帮助，因为我陷入困境。我是 react 新手，我正在创建一个组件，该组件从后端获取可用语言列表并将它们显示到下拉列表中，然后，一旦用户选择一种语言，该组件应该更新以显示所选语言。

我面临的问题是，我不知道为什么，但是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 方法，而不是用作回调。