javascript - 呈现两个异步更新的值的正确方法是什么？

我正在使用两个异步函数来模拟ajax

一个获取组合框选项的变量
其他变量以获取组合框的值

但是，当页面加载组合框陷入原始值“ 0”并且不会更新时。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

App.js

import React, { Component } from 'react';

const Select = ({ options=[], keyOfName, placeholderMessage, defaultValue="-1" }) => {
  return (
    <select required defaultValue={defaultValue}>
      <option disabled value="-1">{placeholderMessage}</option>
      {
        options.map(function (option, index) {
          return (
            <option key={index} value={index}>
              {option}
            </option>
          );
        })
      }
    </select>
  )
}

class Bug extends Component {
  constructor(){
    super();
    this.state = {index: 0}
    let self = this;
    setTimeout(()=>{
      console.log("before setState :" + this.state.index);
      self.setState({index: 1});
      console.log("after setState :" + this.state.index);
    }, 2000);
  }

  render(){
    return (
      <Select
        options={this.props.options}
        defaultValue={this.props.options ? this.state.index : -1}
        placeholderMessage="Seleccione una Cuenta"
      />
    )
  }
}

class App extends Component {
  constructor(){
    super();
    this.state = {options: []};
    let self = this;
    setTimeout(()=>{self.setState({options: ["ji", "xo"]})}, 2000);
  }

  render() {
    return (
      <div>
        <Bug options={this.state.options}/>
      </div>
    );
  }
}

export default App;

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

这是输出

这里的资料库https://github.com/wilcus/stackoverflow-question/

最佳答案

您的问题是您在标签defaultValue中使用的是value而不是<select/>作为参数

阅读Facebook documentation on uncontrolled component了解更多信息。

关于javascript - 呈现两个异步更新的值的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42028685/