ReactJs：如何在点击时重新加载组件

Question

我是React的新手，仍在学习中。我有一个组件Requirements，我希望每次通过单击事件调用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

- Abhinav Mehrotra

---

React基于状态（state）和属性（props）来渲染视图。状态是随着时间变化的东西，因此你所做的就是随时间改变某些东西，所以逻辑上应该调用setState。如果状态无法推断，则还有forceUpdate https://reactjs.org/docs/react-component.html#forceupdate。但是，如果您不使用`setState`，则可能需要仔细考虑逻辑。一个不使用`setState`的例子是实现“单一数据源”（Single Source Of Truth），但是这种情况下，您将使用类似Redux之类的工具。 - Keith

更改状态后将重新加载。 - Ilyas karim

Answer 1

您可以更改组件中给定的key属性以卸载它并安装新组件。

您可以在状态中保留一个随机值，在调用getDocFinancialInfo时再次随机化此值，并将其用作Requirements的key。 示例

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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

- Tholle

---

谢谢。这真的为我节省了很多手动劳动，我原以为我可能需要做的。 :) - Abhinav Mehrotra

Answer 2

如上所述- 更改键值是一个好主意，但是我更喜欢使用new Date()的值来确保键已被更改 :)

最初的回答

- Yury

Answer 3

你可以使用原生JavaScript调用reload方法：window.location.reload(false)。

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

- Madhubala Jayakumaran

---

这不仅重新加载了组件，而且还重新加载了整个页面。 - iron9