Question

我是新手做出反应。我正在使用react select进行rails + react项目。现在，一切都有效，但如果它还不存在，可以添加新的东西。

相关部分是handleNewOption()函数

handleNewOption(option) {
  var self = this;
  $.ajax({
    url: '/url/',
    type: 'POST',
    dataType: 'json',
    data: { q: option.label },
    success: function(data) {
      var state = data.company;
      // state looks like {value: 1, label: "string"}
      self.setState({value: state.value, label: state.label});
    },
    error: function(xhr, status, error) {
      var response = JSON.parse(xhr.responseText);
      alert('Errors: ' + response.errors);
    }
  });
}

无效的部分是self.setState();。除了self.setState(state)，self.setState({state})以及太多其他我甚至无法记住的组合之外，我已经尝试过（我上面提到的）。

对我来说没有意义的是handleOnChange()，看起来像

handleOnChange(value) {
  this.setState({value});
}

这样可以正常工作并在表单中设置值（如果已经存在）。我试图传递handleNewOption(option)中的确切格式，但它不起作用。

编辑：为了提供帮助，这是我的完整组件

var Select = require('react-select');

var CompanySelect = React.createClass({
  getInitialState() {
    return {
      value: ''
    }
  },
  handleOnChange(value) {
    this.setState({value});
  },
  handleNewOption(option) {
    var self = this;
    $.ajax({
      url: '/url/',
      type: 'POST',
      dataType: 'json',
      data: {
        q: option.label
      },
      success: function(data) {
        var state = data.company;
        self.setState(state);
      },
      error: function(xhr, status, error) {
        var response = JSON.parse(xhr.responseText);
        alert('Errors: ' + response);
      }
    });
  },
  getCompanies(input, callback) {
    if (input.length < 2) {
      return callback(null, {
        value: input
      });
    }

    $.ajax({
      url: '/url/search',
      type: 'GET',
      dataType: 'json',
      data: {
        q: input
      },
      success: function(data) {
        companies = data.companies.map(function(company) {
          return {
            value: company.id,
            label: company.name
          }
        });
        callback(null, {
          options: companies,
          complete: false
        });
      }
    });
  },
    render() {
      const { options, value } = this.state;
      return (
        <Select.AsyncCreatable
          multi={false}
          loadOptions={this.getCompanies}
          onChange={this.handleOnChange}
          onNewOptionClick={this.handleNewOption}
          value={value}
          promptTextCreator={(input) => {return ('Add "' + input + '"')}}
          placeholder={this.props.placeholder}
        />
      );
    }
});

module.exports = CompanySelect;

有谁知道为什么setState()中的handleNewOption()不起作用？如果有帮助，我也可以发布更多我的反应组件。

Answer 1

尝试改变这样的状态

success: function(data) {
  self.setState({ value: data.company });
},

假设您的数据实际上是具有属性值和标签的对象。

在handleOnChange中，您将值对象传递给state，但是在您传递的handleNewOption中，您传递的是值字符串和标签字符串到状态，并且您有不匹配的情况。

react-select - setState不起作用

1 个答案: