javascript - React - 普通选择值不更新

Question

我的组件中有一个简单的普通选择:

内容.js:

state = {
    langValue: 'fr'
};

handleChange = event => {
    const newValue = event.target.value;
    this.setState({ value: newValue }, () =>
        this.props.onChangeLanguage(newValue)
    );
};

render() {
  return (
      <select value={this.state.langValue} onChange={this.handleChange}>
          <option value="fr">Français</option>
          <option value="en">English</option>
      </select>
  );
}

调用 onChangeLanguage 方法并更新翻译，但选择的值未更改。如果我在设置状态下删除回调，则选择值正在更新，但语言没有更新(这是正常的)

应用程序.js:

...

let i18nConfig = {
    locale: navigator.language.split(/[-_]/)[0],
    messages: getMessagesFromLang(navigator.language.split(/[-_]/)[0])
};

const [lang, setLang] = React.useState(i18nConfig.locale); // keeps state of lang in App
function onChangeLanguage(lang) {
    setLang(lang); // changes the lang when selec value changes
}

...

Answer 1

您正在设置value的状态属性:

this.setState({ value: newValue }

但随后将其用作langValue

<select value={this.state.langValue} onChange={this.handleChange}>

更改一个以匹配另一个，它就会起作用。

<小时/>

关于您的评论，下面的代码片段证明代码按预期工作。如果您遇到 select 值未更新的问题，我猜测这一定是 prop 函数的副作用。

class Example extends React.Component {
  state = {
      langValue: 'fr'
  };

  handleChange = event => {
      const newValue = event.target.value;
      this.setState({ langValue: newValue }, () =>
          console.log('call your prop function')
      );
  };

  render() {
    return (
        <select value={this.state.langValue} onChange={this.handleChange}>
            <option value="fr">Français</option>
            <option value="en">English</option>
        </select>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>