React-Select: получить значение по умолчанию в React-Select

У меня одна проблема с React-Select. Я получаю это от вызова 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>
    );
  }
}

Я получаю Значение1 в this.props.getSelectedValue.

Где мне не хватает?

Любая помощь была бы замечательной.

Спасибо.

prop обновляется после монтирования компонента?

— 11.07.2018 15:25

Возможный дубликат Как установить значение по умолчанию в response-select

— 11.07.2018 15:27

@BoyWithSilverWings .. Как решить эту проблему?

— 12.07.2018 08:43

@BrijeshPatel Либо смонтируйте компонент только после того, как вы получили данные от бэкэнда, либо напишите getDerivedStateFromProps для вашего компонента

— 12.07.2018 08:45

javascript reactjs

11.07.2018 15:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

730

Ответы 3

если вы хотите установить начальное состояние через реквизиты, вы должны установить их внутри конструктора с реквизитами

так

constructor(props){
    super(props)

      this.state = {
        selectedValue: { label: "Select Value", value:props.getSelectedValue }
      };
}

это не работает. coz перед получением данных из базы данных будет вызван конструктор и, следовательно, он не получит данные в selectedValue.value..

— 12.07.2018 08:42

11.07.2018 16:23

Вы можете попробовать такой способ?

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>
      )
    }

12.07.2018 08:41

Вы можете смонтировать выбранный компонент только тогда, когда возвращается значение из API.

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.value
    }
  }
  handleChangeEvent() {
  }
  render() {
    return (
      <Select
        name = "form-field-name"
        value = {this.state.value}
        onChange = {this.handleChangeEvent}
        options = {[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        {
          this.state.value &&
            <SelectComponent value = {this.state.value} />
        }
        
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src = "https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-select.js"></script>

<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/react-select.css">
<div id = "root"></div>

Вы можете сохранить состояние в родительском компоненте и сбросить состояние для дочернего компонента, вместо того, чтобы устанавливать состояние там.

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Select
        name = "form-field-name"
        value = {this.props.value}
        onChange = {this.props.handleChangeEvent}
        options = {[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        <SelectComponent value = {this.state.value} handleChangeEvent = {this.handleChangeEvent} />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src = "https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-select.js"></script>

<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/react-select.css">
<div id = "root"></div>

Вы также можете прибегнуть к getDerivedStateFromProps, чтобы установить состояние для измененных свойств.

class SelectComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  static getDerivedStateFromProps(props, state) {
    if (props.value!==state.value) {
      return {
        value: props.value
      }
    }
    return null;
  }
  handleChangeEvent() {
  }
  render() {
    return (
      <Select
        name = "form-field-name"
        value = {this.state.value}
        onChange = {this.handleChangeEvent}
        options = {[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null
    }
  }
  componentDidMount() {
    this.getDataFromAPI().then(data=>{
      this.setState({
        value: data
      });
    });
  }
  getDataFromAPI() {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>resolve('one'), 1000);
    });
  }
  render() {
    return (
      <React.Fragment>
        <SelectComponent value = {this.state.value} />
      </React.Fragment>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src = "https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-input-autosize.js"></script>
<script src = "https://unpkg.com/[email protected]/dist/react-select.js"></script>

<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/react-select.css">
<div id = "root"></div>

Я все еще не получил ответа. Я получаю данные в this.props.getValue. как я могу передать это значение в select, который имеет предварительно выбранное значение.

— 18.07.2018 04:57

@BrijeshPatel Ни в одном из фрагментов кода нет вашего ответа? Все они демонстрируют использование props для установки значения select

— 18.07.2018 06:28

Я использовал все ваши фрагменты, но не получил желаемого результата.

— 18.07.2018 12:52

@BrijeshPatel Чем отличается ваш случай? Опора, поступающая асинхронно, должна устанавливать значение для всех демонстраций.

— 18.07.2018 13:58

Я получаю значение в this.props.getValue, которое я получаю от родительского компонента, так как я могу справиться с этим со значением по умолчанию?

— 18.07.2018 14:29

Вы получаете значение для установки в this.props.getValue от родителя, и хотите установить его для компонента «Выбрать»?

— 18.07.2018 15:21

точно. это то, что я хочу. и я не могу вставить конструктор, так как он будет вызываться первым перед методом рендеринга. Я ставлю условие, что if (this.props.getValue) then only I render иначе я покажу загрузчик, пока данные не будут загружены.

— 19.07.2018 05:37

Это то, что делают все три демо. @BrijeshPatel

— 19.07.2018 06:49

большое спасибо за ваше время и усилия. все равно я не получаю желаемого результата .. :(

— 19.07.2018 07:38

12.07.2018 09:17