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) => {

    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}

         ....

        )

    }

Answer 2

尝试这个：

componentDidMount{

    webApi.get('sai/getofflinemembers?userId=N634806')

    .then(event => {

         this.setState({

              data: event.data

         });

    })

}

const isExistLocalStorage = value => {

    return localStorage.getItem(value) ? true : false;

}

render() {

    const { data } = this.state;

    return (

        data && data.map((item, index) => {

            const isExist = isExistLocalStorage(item.Member_ID);

            <tr key={index}>

                <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 ${isExist ? "btn-success" : "btn-warning"}`}

                    > {isExist ? "Ready for Download" : "Not ready"}</button>

                </td>

            </tr>

        })

    )

}