在React中按下按钮重新渲染组件

问题描述

我有一个简单的React组件，目前正在创建。基本上，用户可以输入ID，并且在提交时，它将显示容器中的某些信息。代码看起来像这样

export default class IDContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Id: '',isSubmitted: false
    };
  }

  handleSubmit = (event) => {
    this.setState({
      isSubmitted: true
    });
  };

  handleChange = (event) => {
    this.setState({
      Id: event.target.value
    });
  };


  render() {
    return (
        <form onSubmit={this.handleSubmit}>
          <div
              style={{
                display: 'flex',justifyContent: 'center',alignItems: 'center'
              }}
          >
            <Input type={'text'} placeholder={"Enter Id"} value={this.state.Id} onChange={this.handleChange} />
            <Button type={'submit'} > Lookup </Button>
          </div>

          <div>
            {this.state.isSubmitted && <DetailsContainer Id={this.state.Id} />}
          </div>
        </form>
    );
  }
}

详细信息容器已经创建，并且仅返回有关已传递ID的一些详细信息。我可以很好地显示我传递的第一个ID的详细信息。但是，当我输入另一个ID并提交表单时，DetailsContainer不会重新呈现，并且仍在显示旧ID的详细信息。我尝试移动它并添加一些逻辑（我什至将DetailsContainer置于我的状态以查看是否可以这种方式进行操作），但这似乎不起作用。我看到有一个shouldComponentUpdate()方法，这似乎是我需要使用的方法，但是我看到的所有指南都将其放在DetailsContainer中。无论如何，我可以在IDContainer中使用它，还是有一种更简单的方法来重新渲染DetailsContainer？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript react-component reactjs reactjs