Reactjs 如何刷新嵌套组件视图，该视图显示在React中执行的搜索结果

我有一个下拉/选择月份字段和一个按钮，可以单击该按钮查看该月份的结果

如下面的代码所示，单击按钮可设置查询月份并更改ShowResultForMonth组件可见

单击还会将查询月份传递给组件，以便正确呈现嵌套组件的结果。但是，当我选择一个新月份并再次单击该按钮时，它不会刷新嵌套组件的视图，并显示第一个查询月份的结果

当我重新提交选择时，如何刷新嵌套组件

export default class MonthSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            queryYear: '',
            months: ['Jan', 'Feb', 'Mar', 'Apr']
            detailVisible: false
        };
    }

    onMonthChange = (event) => {
        this.setState({ queryMonth: event.target.value });
    }

    onSend = (event) => {
        this.setState({ detailVisible: true });
    }

    render() {
        return (
            <div>
                <select onChange={this.onMonthChange}>
                    {this.state.months.map((mt) => <option key={mt.value} value={mt.value}>{mt.display}</option>)}
                </select>
                <button onSubmit={this.onSend}>
                    Search
                </button>
                { this.state.detailVisible ?
                    <ShowResultForTheMonth queryMonth={this.state.queryMonth} />
                    : <h3>select month</h3>
                }
            </div>
        )
    }
}

---

稍微修正了你的例子，效果很好。 看看，你会发现你的代码出了什么问题

export default class MonthSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryYear: "",
      months: ["Jan", "Feb", "Mar", "Apr"],
      detailVisible: false
    };
  }

  onMonthChange = (event) => {
    this.setState({ queryMonth: event.target.value });
  };

  onSend = (event) => {
    this.setState({ detailVisible: true });
  };

  render() {
    console.log(this.state)
    return (
      <div>
        <select onChange={this.onMonthChange}>
          {this.state.months.map((mt) => (
            <option key={mt} value={mt}>
              {mt}
            </option>
          ))}
        </select>
        <button onClick={this.onSend}>Search</button>
        {this.state.detailVisible ? (
          <ShowResultForTheMonth queryMonth={this.state.queryMonth} />
        ) : (
          <h3>select month</h3>
        )}
      </div>
    );
  }
}

function ShowResultForTheMonth(props) {
  return (
    <p>{props.queryMonth}</p>
  );
}

---

你的例子有用吗？按钮不支持onSubmit属性，并且月数组中的项目不包含display或value属性。我正在尝试提取必要的信息。我可以更新它。很抱歉。Serega我们能否仅在单击搜索按钮时更新ShowResultForTheMonth组件？现在，一旦我们搜索，它将呈现ShowResult，但在这之后，当我们选择“月份”时，我们不必单击“搜索”，它只需更新view.ShowResultForTheMonth，一旦获得新属性，它将重新呈现。所以，如果您只想在单击搜索后重新渲染它，您可以执行下一步：将detailVisible从boolean更改为queryMonth，这应该由ShowResultForTheMonth渲染。比如：`this.state={queryYear:，months:[Jan，Feb，Mar，Apr]，visibleMonth:null}；`然后是`onSend==>{this.setStatestate=>{visibleMonth:state.queryMonth}；}；`更改ShowResultForTheMonth呈现“{this.state.visibleMonth”的条件`