Reactjs需要将Render中的const与componentDidMount中的axios调用结合起来以创建DOM元素表

Question

问题：我能够使用componentDidMount中的axios进行Web api调用，然后在Render中，我可以使用.map遍历数据，并使用表和bootstrap类创建html。我遇到的问题是要求我需要有一些按钮来显示它们是否是本地存储中的成员。因此，现在我认为我需要将所有内容移出Render（）并放入循环以及if / else检查以在webapi中显示正确的按钮。

使用axios调用中的html表和数据执行此操作的最佳方法是什么？

带有Axios Web API调用的componentDidMount：

 componentDidMount() {

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

          // Instead of looping with .map in the render(), thinking I need to
          // do the looping inside here to correctly create the correct element 
          // with the right color button and text 
          for (var i = 0; i < event.data.length; i++) {

             //check with local storage if the memberid exist
             // need to use a different button style and text
             if (localStorage.getItem(event.data[i]["Member_ID"]) != null) {
                //document.getElementById(event.data[i]["Member_ID"]).classList.remove('btn-warning');
                //above would be after 
                // need to DO ALL in render  const contents html table in here 
                // <button id={item.Member_ID} type="button" onClick={(e) => this.downloadUser(item.Member_ID,e)} 
                  className="btn btn-success">SAI</button>
             }

          }

          this.setState({
                data: event.data
          });


    });
渲染：

 render() {

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

问题：我能够使用componentDidMount中的axios进行Web api调用，然后在Render中，我可以使用.map遍历数据，并使用表和bootstrap类创建html。问题我有...

Answer 1

componentDidMount和render之类的生命周期方法具有标准的角色分离。通常，前者用于执行一些API调用（如您所拥有的），而后者则用于渲染。您应该避免尝试在componentDidMount中生成标记，而不是真的有可能。

Answer 2

尝试一下：