Question

我是React的新手，并且仍在学习它。我有一个组件要求，我想在每次点击事件调用 getDocFinancialInfo（）时重新加载。问题是它会在第一次加载正确的信息，但不会在随后的点击中刷新它。任何帮助或建议都将受到欢迎。

    import React, { Component } from 'react';
    import './UploadDocument.css'
    import spinner from './spinner.gif'
    import verified from './verified.png';
    import notverified from './not-verified.png';
    import Requirements from './Requirement.js'


    class UploadDocument extends Component{

      constructor(props) {
        super(props);
        this.state = {
          application: [],
          document:[],
          id: null,
          files: [],
          docFinacialInfo: [],
          uploaded: null,
          fileInfo: []
        }
      }


      componentDidMount() {
        ......
      }




      getDocFinancialInfo = async(docId) => {
          sessionStorage.setItem('docId',docId);

          var req = document.getElementById('requirements');
          req.style.display = "block";
      }




      render(){
        ......

          if(notVerifiedStatus > 0){
              docVerificationStatus[index] = <td className="red"><img src={notverified} alt="Not Verified"/><label onClick={()=>this.getDocFinancialInfo(docId)}>Not Verified{docId}</label></td>;
          }else{
              docVerificationStatus[index] = <td className="green"><img src={verified} alt="Verified" /><label>Verified</label></td>;
          }
          console.log("Not Verified >>>"+notVerifiedStatus);
        });

        ......

        return(
          <div>

                .........

                    <div id="requirements">
                      <div id="requirements-content">
                        <span className="close" onClick={()=>this.closeRequirements()}>&times;</span>
                        <Requirements />
                      </div>
                    </div>

                .........
          </div>
        )
      }
    }

    export default UploadDocument

Answer 1

您可以更改为组件指定的key道具，以便卸载并安装新的道具。

您可以将一个随机值保持在您被调用getDocFinancialInfo时再次随机化的状态，并将该值用作key的{{1}}。

示例

Requirements

class Requirements extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(({ count }) => ({ count: count + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div> {this.state.count}</div>;
  }
}

class UploadDocument extends React.Component {
  state = {
    requirementKey: Math.random()
  };

  getDocFinancialInfo = docId => {
    this.setState({ requirementKey: Math.random() });
  };

  render() {
    return (
      <div>
        <Requirements key={this.state.requirementKey} />
        <button onClick={this.getDocFinancialInfo}> Reload </button>
      </div>
    );
  }
}

ReactDOM.render(<UploadDocument />, document.getElementById("root"));

Answer 2

如上所述-更改键值是一个好主意但是我不使用Math.random而是使用新的Date（）值来确保无论如何都要更改键：）

Answer 3

您可以使用香草Javascript调用reload方法window.location.reload(false)

<button onClick={() => window.location.reload(false)}>Click to reload!</button>

ReactJs：如何在onClick上重新加载组件

3 个答案: