React 在 react-select Input 更改状态后不会重新呈现 ComponentDidUpdate

Question

我真的迷失在这个上面：

import React, { Component } from "react";
import Select from "react-select";

class selectDemo extends Component {
  state = {
    selectedOption: "",
    data: [{ Model: "Option1" }, { Model: "Option2" }]
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption }, () =>
      console.log(this.state.selectedOption.Model)
    );
  };

  renderButton = () => {
    return (
      <button type="button" class="btn btn-primary">
        {this.state.selectedOption.Model}
      </button>
    );
  };

  componentDidUpdate(prevProps, prevState) {
    if (this.state.selectedOption !== prevState.selectedOption) {
      this.renderButton();
    }
  }

  render() {
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.Model;
    return (
      <div>
        <div name="selectedOption" className="section">
          <Select
            className="form-control"
            placeholder="Select Option"
            name="selectedOption"
            value={value}
            onChange={this.handleChange}
            labelKey="Model"
            valueKey="Model"
            optionClassName="dropdown-item"
            options={this.state.data}
          />
        </div>
        <div className="form-group">{this.renderButton}</div>
      </div>
    );
  }
}

export default selectDemo;

我想要实现的是，在我从使用 react-select 包创建的下拉列表中进行选择后，页面上会呈现一个按钮。一切正常，除了在创建 selection 后按钮不会呈现这一事实。有人知道我哪里错了吗？

Answer 1

您在主 render 函数中缺少对 this.renderButton 的函数调用。它应该看起来像：

<div className="form-group">{this.renderButton()}</div>

此外，在您的 componentDidUpdate 中，您正在调用 this.renderButton() 但这不会导致它呈现返回的标记。来自 handleChange 的状态更新将触发组件的重新渲染，而无需您签入 componentDidUpdate.

Answer 2

您必须显式调用 renderButton this.renderButton()

正确的方法是：

class SelectDemo extends React.Component {
  state = {
    selectedOption: "",
    data: [{ Model: "Option1" }, { Model: "Option2" }]
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption }, () =>
      console.log(this.state.selectedOption.Model)
    );
  };

  renderButton = () => {
    return (
      <button type="button" className="btn btn-primary">
        {this.state.selectedOption.Model}
      </button>
    );
  };

  render() {
    const { selectedOption } = this.state;
    const value = selectedOption && selectedOption.Model;
    return (
      <div>
        <div name="selectedOption" className="section">
          <Select
            className="form-control"
            placeholder="Select Option"
            name="selectedOption"
            value={value}
            onChange={this.handleChange}
            labelKey="Model"
            valueKey="Model"
            optionClassName="dropdown-item"
            options={this.state.data}
          />
        </div>
        {this.state.selectedOption && <div className="form-group">{this.renderButton}</div>}
        <div className="form-group">{this.renderButton()}</div>
      </div>
    );
  }
}

React 在 react-select Input 更改状态后不会重新呈现 ComponentDidUpdate

React doesn´t rerender ComponentDidUpdate after react-select Input changed state

javascript

reactjs

react-select