Question

我正在php laravel上做一个项目并做出反应。我在react中有2个下拉列表，在选择第一个下拉列表后将它们连接起来，第二个将从API请求中加载。我用状态填充列表，但是每当重新渲染setState()页时，每个选择都将重置。我尝试这样做是为了防止重新渲染：

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

有没有办法重新填充填充项的下拉列表而无需重新渲染？

Answer 1

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

请使用此链接example code或在其中引用下面的代码，其中第二个选择框的值随第一个选择框而变化

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

我如何刷新反应中的下拉列表

1 个答案: