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属性的回调。您应该从方法中删除paratheses，而是将文本作为参数传递。

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

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

更新组件不起作用ReactJs

1 个答案: