Question

我刚开始在我的Ruby on Rails前端添加一些React。

我有两个数据模型，分别称为countries和coffee_beans。

我想在id和country_name字段的国家（地区）的coffee_beans表单上添加一个选择下拉列表。我需要将ID提交到import React from 'react'; import axios from 'axios'; import Select from 'react-select'; class Country extends React.Component { constructor() { super(); } componentDidMount() { axios.get(`/countries.json`) .then(res => { const countries = res.data; this.setState({ countries }); }) } render() { let optionItems = countries.map(countries => <option key={countries.id}>{countries.country_name}</option> ); return ( <div className=""> <label htmlFor="coffee_beans_countries">Country</label> <Select id="country" name="coffee_beans[countries]" options={optionItems} /> </div> ) } } export default Country表中。

我能够通过axios检索数据，但是我很难使数据显示在下拉列表中。

我正在使用React-Select。

import React from 'react'
import ReactDOM from 'react-dom'
import Country from 'Country'

document.addEventListener('turbolinks:load', function() {
    var element = document.getElementById("country-component");
    ReactDOM.render(<Country />, element);
});

渲染元素

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

class Country extends React.Component {
    state = {
        countries: []
      }

  componentDidMount() {
    axios.get(`/countries.json`)
      .then(res => {
        const countries = [];
        this.setState({ countries });
      });
      console.log(countries)
  }

  render() {
    let optionItems = this.state.countries.map(countries => 
        <option key={countries.id}>{countries.country_name}</option>
    );

    return (
        <div className="">
        <label htmlFor="coffee_beans_countries">Country</label>
            <Select id="country" name="coffee_beans[countries]" options={optionItems} />
        </div>
    )
  }
}

export default Country

更新我现在有以下代码，但出现错误：

warning.js：33警告：只能更新已安装的或正在安装的零件。这通常意味着您调用了setState，replaceState或在未安装的组件上的forceUpdate。这是无人操作。

$(function () {
// Restricts input for each element in the set of matched elements to the given inputFilter.
$.fn.inputFilter = function (inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function () {
        if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
            iziToast.destroy();
            ShowToast('Erro', 'topRight', 'error', 'Insira um número válido.', '2000');
        }
    });
};

$('input[id*=txtCadenciaMensal], input[id*=txtLancamentoFormas], ' +
    'input[id*=txtNumComponentes], input[id*=txtNumKanbans], input[id*=txtQtdStockMin], ' +
    'input[id*=txtQtdStockMax], input[id*=txtPecasCaixa]').inputFilter(function (value) {

        return /^\d*$/.test(value);
    });

$('input[id*=txtPeso], input[id*=txtDias], input[id*=txtComprimento1]').inputFilter(function (value) {
    return /^(\d+[,])?\d*$/.test(value);
});


$('.comprimento').inputFilter(function (value) {
    debugger
    return /^(\d+[,])?\d*$/.test(value);
});

Answer 1

let optionItems = countries.map

应该是

let optionItems = this.state.countries

，还需要设置初始状态。所以：

import React from 'react';
import { render } from 'react-dom';
import Select from 'react-select';

class Country extends React.Component {
  state = {
    countries: []
  }

  componentDidMount() {
    const countries = []
    this.setState({ countries });
  }

  render() {
    let optionItems = this.state.countries.map(countries =>
      <option key={countries.id}>{countries.country_name}</option>
    );

    return (
      <div className="">
        <label htmlFor="coffee_beans_countries">Country</label>
        <Select id="country" name="coffee_beans[countries]" options={optionItems} />
      </div>
    )
  }
}

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

实时示例here。

Answer 2

由于国家/地区是唯一的州，请尝试 this.state.map(countries => ... -要么- 在componentDidMount中， this.setState({countries: countries})

Answer 3

对于更新的警告：前几天我遇到了同样的问题，但是我使用的是提取API，所以我不知道它是否会起作用。我刚刚使我的componentDidMount（）异步，并在我在其中调用的每个异步方法之前进行了等待。这是最终结果：

async componentDidMount() {
    await this._getUserData();
}

_getUserData = async () => {
    try {

        const response = await fetch(url);
        this.setState({firstAccess: responseJson.data.name});

    } catch(error) {
        console.log(error);
    }
}

我是React和JavaScript的新手，所以我不确定它为什么能工作，但是似乎React只是在警告您在尚未安装Component时可以调用Promise中的setState（）。，如果您在axios调用之后调用另一个setState，则会发生这种情况，从而导致组件重新渲染（不知道是否如警告所述那样认为已卸载），并且更改了诺言setState将在此处调用。如果使componentDidMount异步，则它使您可以等待Promise得以解决，而不会出现问题。但是，再次...我不确定哈哈。

使用Axios的Dynamic React Select

3 个答案: