javascript - Reactjs需要结合Render中的const和componentDidMount中的axios调用来创建DOM元素表

Question

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

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

componentDidMount 与 Axios Web api 调用:

 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}
         ....
        )
    }

Answer 1

诸如componentDidMount和render之类的生命周期方法具有标准的 Angular 色隔离。通常，前者用于执行一些 API 调用(就像您所拥有的那样)，而后者则使用 render 来生成标记。您应该避免尝试在 componentDidMount 中生成标记，无论如何都不可能生成标记。

听起来您要做的就是检查从 API 返回的项目在 localStorage 中是否可用，然后根据其存在情况有条件地更改该按钮的 className 。您只需创建一个辅助函数即可帮助您完成此任务。

checkItem = (item) => {
    let className;
    if(localStorage.getItem(item["Member_ID"]) != null){
       className = "btn btn-success"
    } else {
       className = "btn btn-warning"
    }
    return className
}

然后，由于您要映射项目数组，我们可以根据您的标记调用此函数。

 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={this.checkItem(item)}>Ready for Download</button>
              </td>
         </tr>
        ))
        return(
         ....
         {contents}
         ....
        )
    }