页面加载后 ReactJS 似乎无法调用函数答案

【问题标题】：ReactJS cannot seem to call function after page load页面加载后 ReactJS 似乎无法调用函数
【发布时间】：2020-01-29 10:00:36
【问题描述】：

我需要能够在页面加载后更新按钮类样式。尝试在 Render() 中执行此操作，我看到人们谈论 setTimeout 和 setInterval，但这种与事件的另一种方式在部分时间起作用

ComponentDidMount 使 axios Web api 调用抓取数据并在地图中呈现所有内容。我需要检查本地存储等，并想更新按钮颜色和文本，所以我尝试了很多东西，但后来尝试了 window.addeventlistener ... this.handleload

似乎只在部分时间工作......它发生得太快了，我不想像计时器一样添加“黑客”，但我不知道如何做到这一点。

我也尝试在渲染中调用函数。不知道为什么这很难做到。

handleLoad() {
    alert('always runs from outside loop');

    // loop ONLY runs after refreshing browser several times
    for (var i = 0; i < this.state.data.length; i++) {
       //rarely makes it in 
       alert('made it');
       document.getElementById("4534552").classList.remove('btn-warning');
    }
 }

componentDidMount() {

     webApi.get('sai/getofflinemembers?userId=N634806')
            .then((event) => { 
            //........
    }


    // THIS is what i call 
    window.addEventListener('load', this.handleLoad);

}



render() {

    const contents = this.state.data.map(item => (
        <button id={item.Member_ID} type="button" onClick={(e) => this.downloadUser(item.Member_ID,e)} 
              className="btn btn-warning">Ready for Download</button>
    )
}

我只需要调用一个函数并遍历所有 DOM 并根据需要进行更改。现在这让我开始考虑创建一个我不知道的虚拟 DOM。

如果已经设置了成员，则需要检查本地存储，然后将引导按钮的类设置为特定的颜色和文本。

想法？

【问题讨论】：

你在哪里初始化this.state.data？ weApi.get().then() 会设置值吗？
您能否提供有关 axios 调用和 handleLoad 方法的更多详细信息？在我看来，窗口加载事件应该立即触发，因为它与页面加载有关。
如果我学到了关于 react 的一件事，那就是...... react 中要避免的一件事是通过 document.getElementById 操作原始 DOM。您在渲染函数中设置类名，因此使用类似 classnames 节点模块的东西来计算和设置组件上的类名。
是你定义为页面加载是在你完成调用webApi.get('sai/getofflinemembers?userId=N634806')之后？如果是这样，您可以在 .then 挂钩中调用 this.handleLoad()。

标签： javascript reactjs twitter-bootstrap jsx virtual-dom

【解决方案1】：

只是一个建议：如果你想操作 DOM，最好使用refs 而不是使用document.getElementById。 https://reactjs.org/docs/glossary.html#refs

但是你的问题可以通过使用state来存储css类来解决：

class SomeComponent extends React.Component {

  state = {
    buttonCSSClass: 'btn btn-warning',
  }

  componentDidMount() {
        webApi.get('sai/getofflinemembers?userId=N634806')
            .then((event) => {})
            .then(() => this.setState({buttonCSSClass: 'btn'})) // it will update the css class
        }
  }

  render() {
    const { data, buttonCSSClass } = this.state
    return data.map(item => (
      <button
        key={item.Member_ID}
        id={item.Member_ID}
        type="button"
        onClick={e => this.downloadUser(item.Member_ID, e)}
        className={buttonCSSClass} 
      >
        Ready for Download
      </button>
    ))
  }
}

【讨论】：