Reactjs нужно объединить const в Render с вызовом axios в componentDidMount для создания таблицы элементов DOM

Question

Проблема: я смог сделать вызов web api с помощью axios в componentDidMount, затем в Render я мог перебрать данные с помощью .map и создать HTML с таблицами и классами начальной загрузки. Проблема, с которой я столкнулся, заключается в том, что мне нужно иметь кнопки, показывающие, являются ли они членами локального хранилища или нет. Таким образом, теперь я думаю, что мне нужно переместить все из Render () и поставить цикл, и если / else проверяет правильность отображаемой кнопки внутри раздела webapi .then

Каков наилучший способ сделать это сHTML таблицы и данные в вызове axios?

componentDidMount с веб-вызовом API Axios:

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

Answer 2

Методы жизненного цикла, такие как 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}
         ....
        )
    }