时间戳

首页 > 解决方案 > 在 react-select 输入更改状态后，React 不会重新渲染 ComponentDidUpdate

javascript - 在 react-select 输入更改状态后，React 不会重新渲染 ComponentDidUpdate

问题描述

我真的迷失了这个：

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 包创建的下拉列表中进行选择之后，一个按钮会在页面上呈现。一切工作正常，除了在进行选择时按钮没有被渲染。任何人都知道我错在哪里？

标签： javascriptreactjsreact-select

解决方案

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

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

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

推荐阅读