Reactjs 需要结合 Render 中的 const 和 componentDidMount

Question

问题：我能够在 componentDidMount 中使用 axios 进行 web api 调用，然后在 Render 中我可以使用 .map 循环遍历数据并使用 table 和 bootstrap 类创建 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具有标准的角色隔离。通常，前者旨在执行一些 API 调用（如您所拥有的），而后者，render 用于生成标记。componentDidMount无论如何，您应该避免尝试生成标记，而不是像它真的可能那样。听起来您要做的就是检查从 API 返回的项目是否在 localStorage 中可用，然后className根据其存在有条件地更改该按钮的 。您可以创建一个辅助函数来帮助您实现这一目标。checkItem = (item) => {&nbsp; &nbsp; let className;&nbsp; &nbsp; if(localStorage.getItem(item["Member_ID"]) != null){&nbsp; &nbsp; &nbsp; &nbsp;className = "btn btn-success"&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;className = "btn btn-warning"&nbsp; &nbsp; }&nbsp; &nbsp; return className}然后，由于您正在映射项目数组，因此我们可以根据您的标记调用此函数。&nbsp;render() {&nbsp; &nbsp; const contents = this.state.data.map(item => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_Name}</td>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_DOB}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.ProgramType}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id={item.Member_ID} type="button" onClick={(e) => this.downloadUser(item.Member_ID,e)}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={this.checkItem(item)}>Ready for Download</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{contents}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;....&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }

Answer 2

尝试这个：componentDidMount{&nbsp; &nbsp; webApi.get('sai/getofflinemembers?userId=N634806')&nbsp; &nbsp; .then(event => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: event.data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; })}const isExistLocalStorage = value => {&nbsp; &nbsp; return localStorage.getItem(value) ? true : false;}render() {&nbsp; &nbsp; const { data } = this.state;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; data && data.map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const isExist = isExistLocalStorage(item.Member_ID);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_Name}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_ID}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.Member_DOB}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{item.ProgramType}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={item.Member_ID}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={(e) => this.downloadUser(item.Member_ID, e)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={`btn ${isExist ? "btn-success" : "btn-warning"}`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; > {isExist ? "Ready for Download" : "Not ready"}</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; )}