Javascript 如何在react中重新刷新选择下拉列表

我正在做一个关于php laravel和react的项目。我在react中有两个下拉列表，它们在选择第一个下拉列表后连接。第二个下拉列表将从API请求加载。我用状态填充列表，但每当我设置状态页面时，就会重新呈现，并且每次选择都会重置。我尝试此操作以防止重新渲染：

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.segment_right !== nextState.segment_right) {
        return false;
    }
    return true;
}

它会停止重新渲染，但下拉列表不会填充

这是我的选择下拉列表：

{['segments'].map(key => (
<Select
    key="segment_2"
    size="large"
    showSearch
    style={{width: '100%', marginTop: 16, borderRadius: 0}}
    placeholder="Segment Seçiniz"
    optionFilterProp="children"
    onChange={() => {
    }}
    filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}>
    {this.state.segment_right.map(({[key]: value}) =>
        <Select.Option key={value} value={value}>{value}</Select.Option>)}
</Select>
))}

那么，有没有一种方法可以在不重新渲染的情况下重新加载填充项的下拉列表

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.segment_right !== nextState.segment_right) {
        return false;
    }
    return true;
}

因此，您的“阻止渲染以便”下拉选项不会填充

解决方案：您可以将第一个选择框值存储在状态中，并将其置于defaultValue

我没有你的完整代码结构，所以你的代码可能会变得像贝娄

onChange=(e)=>{
  this.setState({
    value:e.target.value
   })
}


{['segments'].map(key => (
<Select
    key="segment_2"
    size="large"
    // append state value to default value and onChange event
    defaultValue={this.state.value}
    onChange={this.onChange}
    showSearch
    style={{width: '100%', marginTop: 16, borderRadius: 0}}
    placeholder="Segment Seçiniz"
    optionFilterProp="children"
    onChange={() => {
    }}
    filterOption={(input, option) => option.props.children.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0}>
    {this.state.segment_right.map(({[key]: value}) =>
        <Select.Option key={value} value={value}>{value}</Select.Option>)}
</Select>
))}

请通过此链接或参考下面的代码，第二个选择框的值随第一个选择框的变化而变化

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      loading: false,
      count: []
    };
  }

  onFirstSelect = e => {
    const value = e.target.value;
    this.setState(
      {
        loading: true,
        value: value
      },
      //call the api and
      () => {
        this.setState({
          loading: false,
          count: [value, 1]
        });
      }
    );
  };

  render() {
    return (
      !this.state.loading && (
        <div className="App">
          <select onChange={this.onFirstSelect} defaultValue={this.state.value}>
            <option>slect value</option>
            <option value="a">a</option>
            <option value="b">b</option>
            <option value="c">c</option>
            <option value="d">d</option>
          </select>
          <select>
            <option>slect value</option>
            {this.state.count.map(d => <option value={d}>{d}</option>)}
          </select>
        </div>
      )
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

只要状态变量发生更改，组件就会更新。若组件不更新，您的状态变量更改将不会反映出来。顺便问一下，如果特定组件的重新加载程序纯粹依赖于这些状态更改，那么该组件的重新加载程序有什么问题？我有两个选择下拉列表。我用2个API填充它们。当第一次选择时，在onChange函数中；第二个select下拉列表调用api并填充选项。但当填充时，由于设置状态功能，会导致重新渲染。所有选择的选项都会被重置。我建议对两个下拉菜单使用单独的组件，都使用一些基本选项和样式，但对数据获取和状态设置有单独的逻辑。我知道，但我想问的是，还有其他方法吗？您也可以在状态变量中为两个下拉菜单维护选定的值，这样，即使您的组件呈现，您的状态变量也将被保留，并且从状态中选择的值可以使用该值设置您的选择组件。谢谢，它解决了我使用deafultValue函数的问题