首页 > 解决方案 > React.js如何用字符串替换响应数据中的空字符串或空字符串?

问题描述

我仍在开发我的第一个应用程序,并且无法弄清楚如何用占位符“N/A”字符串替换获取响应数据。我正在使用 React Axios 发出我的获取请求:

onAdmissionClick(event) {
    var patientName = event.target.value;
    const axiosInstance = axios.create({
      headers: { 
        'Authorization': 'TOKEN ,
        'Accept': 'application/json' }
    });
    axiosInstance.get('APILINK' + patientName + '&_count=5&_sort=-date')
      .then(response => {
      !response.data.entry ? this.setState({ EncounterData: ''}) : this.setState({ EncounterData: response.data.entry});

      this.toggleModal(); 
      console.log(response.data.entry);
      
    }).catch((error) => console.log(error));

现在 'EncounterData' 是一个 JSON 响应,但问题是一些值是 null 或空字符串,并且在渲染时遇到一个会使我的应用程序崩溃。我在渲染数据时使用了三元运算符。例如,“参与者”的某些数据有时可以是空字符串,如果患者仍在接受治疗,“出院日期”也可以为空:

{
            Object.keys(this.state.EncounterData).length !== 0  ?
            Object.values(this.state.EncounterData).map((items, i)   => {

              return (
                
                <li key={i}>
                   <p>Visit ID: {items.resource.identifier[0].value}</p> 
                   <p>Attending Physician: {items.resource.participant[0].individual.display} </p>
                   <p>Admitting Physician: {items.resource.participant[1].individual.display} </p>
                   <p> Admission Date: {items.resource.period.start.split('T')[0]} </p>
                   <p> Discharge Date: {items.resource.period.end.split('T')[0]} </p>
                  
                </li>
              )
            }) : <li>no Admissions reported</li>
       }

如何使用字符串“N/A”检查和替换任何 null 或空数据?如有必要,我愿意创建新的状态。

标签: javascriptreactjserror-handlingaxios

解决方案


推荐阅读