Javascript 反应选择：在反应选择中获取默认值

我在反应选择方面面临一个问题。我通过调用API获得它的值。但它并没有得到我通过调用API得到的值

import React from "react";
import Select from "react-select";

class SelectValue extends React.Component {
  state = {
    selectedValue: { label: "Select Value", value: this.props.getSelectedValue }
  };

  renderSelectOptions = refundOptions => {
    return <span>{refundOptions.label}</span>;
  };

  onSelectChange = selectedRefund => {
    this.setState({
      selectedValue
    });
  };

  render() {
    return (
      <div>
        <Select
          name="select1"
          placeholder="Select"
          value={this.state.selectedValue.value}
          onChange={this.onSelectChange}
          clearable={false}
          searchable={false}
          optionRenderer={this.renderSelectOptions}
          options={[
            { value: 1, label: "Value 1" },
            { value: 2, label: "Value 2" },
            { value: 3, label: "Value 3" }
          ]}
        />
      </div>
    );
  }
}

从“React”导入React；
从“反应选择”导入选择；
类SelectValue扩展了React.Component{
状态={
selectedValue:{标签：“选择值”，值：this.props.getSelectedValue}
};
renderSelectOptions=退款选项=>{
返回{returnoptions.label}；
};
onSelectChange=selectedRefund=>{
这是我的国家({
选择值
});
};
render（）{
返回(
);
}
}

我在

this.props.getSelectedValue

中获得值1

我缺少什么

任何帮助都会很好

---

谢谢。

如果你想通过道具设置初始状态，你必须在带有道具的构造函数中设置它们

所以

---

你这样试试吗

constructor(props){
     super(props);
      this.state = {
        selectedValue: false,
      }
  }

    componentDidMount = () => {
      this.setState({selectedValue: this.props.getSelectedValue });
    }

    _changeValue = selectedValue => {
        if (selectedValue.value !== null) {
          this.setState({ selectedValue: selectedValue.value });
        }
      }

    render(){
      const { selectedValue } = this.state;
      let values = [{ value: true, label: 'first' }, { value: false, label: 'second' }];

      return(
        <div>
              <Select
                 name="selectedValue"
                 value={selectedValue}
                 onChange={this._changeValue}
                 options={values}
              />
        </div>
      )
    }

构造函数（道具）{
超级（道具）；
此.state={
selectedValue:false，
}
}
componentDidMount=（）=>{
this.setState（{selectedValue:this.props.getSelectedValue}）；
}
_changeValue=selectedValue=>{
如果（selectedValue.value！==null）{
this.setState（{selectedValue:selectedValue.value}）；
}
}
render（）{
const{selectedValue}=this.state；
let values=[{value:true，标签：'first'}，{value:false，标签：'second'}]；
返回(
)
}

您可以选择仅在API返回值时装载select组件

class SelectComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
价值：道具价值
}
}
handleChange（）{
}
render（）{
返回(
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：null
}
}
componentDidMount（）{
这个.getDataFromAPI（）.then（数据=>{
这是我的国家({
值：数据
});
});
}
getDataFromAPI（）{
返回新承诺（（解决、拒绝）=>{
setTimeout（（）=>resolve（'one'），1000）；
});
}
render（）{
返回(
{
这个。状态。值&&
}
);
}
}
render（，document.getElementById（“根”））

prop
在安装组件后得到更新？可能与@BoyWithSilverWings重复。。如何解决此问题？@BrijeshPatel要么仅在从后端接收数据时装载组件，要么为组件编写
getDerivedStateFromProps
，因为组件不工作。因为在从数据库获取数据之前，构造函数将被调用，因此它不会在
selectedValue.value.
中获取数据。我仍然没有得到答案。我在
this.props.getValue
中获取数据。如何将此值传递给具有预选值的
select
。@BrijeshPatel没有一个代码段有您的答案？所有这些都是使用道具来设置select的值的演示。我已经使用了您所有的代码片段，但仍然没有得到所需的输出。@BrijeshPatel您的案例有什么不同？异步到达的道具应该为所有演示设置值。我从父组件获取的
this.props.getValue
中获取值，那么如何处理默认值？
constructor(props){
     super(props);
      this.state = {
        selectedValue: false,
      }
  }

    componentDidMount = () => {
      this.setState({selectedValue: this.props.getSelectedValue });
    }

    _changeValue = selectedValue => {
        if (selectedValue.value !== null) {
          this.setState({ selectedValue: selectedValue.value });
        }
      }

    render(){
      const { selectedValue } = this.state;
      let values = [{ value: true, label: 'first' }, { value: false, label: 'second' }];

      return(
        <div>
              <Select
                 name="selectedValue"
                 value={selectedValue}
                 onChange={this._changeValue}
                 options={values}
              />
        </div>
      )
    }