Question

我正在使用React native base进行设计的本机应用程序。我正在使用date picker中的native base。我也显示了我从api获取的不同日期的不同结果。现在，有些日期有数据，有些则没有。当我选择一个没有数据的日期时，它显示为空白。但是显示空白后，我无法从其他有数据的日期获取数据。有点卡住了。但是，如果我选择有数据的日期，它就可以正常工作。这是我现在拥有的代码：

async setDate(newDate) {
    let day = newDate.getDate()
    console.log('date', day)
    let month = newDate.getMonth() + 1
    let year = newDate.getFullYear()
    day = String(day).length > 1 ? day : '0' + day
    month = String(month).length > 1 ? month : '0' + month
    let fullDate = 'https://myapi'+year+month+day
    await fetch(fullDate, {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((response) => {
        console.log('new', response)
        if(response === null){
          this.setState({ 
            tableData1: [],
            tableData2: [],
            tableData3: [],
          })
        } else {
        const first = response.First
        this.setState({ tableData1: first })
        const second = response.Special
        this.setState({ tableData2: second })
        const third = response.Consolidation
        this.setState({ tableData3: third })
        }
      })
  }

在选择没有任何值的日期后，如何照常获取数据？

Answer 1

我很惊讶您在控制台或屏幕上没有收到任何错误-您是否正在设备或模拟器上进行测试？

if(response === null)是您的问题，undefined === null的计算结果为false，因此您要插入else语句并尝试访问response.First等undefined，这将导致抛出错误-这就是为什么事情“卡住”的原因。

您可以简化检查过程，并且正如我的评论中所述，if else可能需要清理很多，因为您不需要从response分配数据反对使用变量，因为您没有重复使用它们-多次调用setState将导致该组件的三个重新渲染。

此块可能有多简洁的一些示例。我将在不知道您的经历的情况下说明正在做的事情，而其他读者可能没有您自己的经历：

if(!response)
  this.setState({tableData1: [], tableData2: [], tableData3: []})
else 
  this.setState({
    tableData1: response.First, 
    tableData2: response.Special, 
    tableData3: response.Consolidation
})

一个简单的if(!response)检查即可解决错误，setState被合并为一个调用，而值则直接从响应对象中提取。您会注意到我从if和else块中都省略了花括号，因为它们都是单个语句块。

或者您可以更进一步：

.then((response) => {
    this.setState({
        tableData1: response.First          ? response.First         : [],
        tableData2: response.Special        ? response.Special       : [],
        tableData3: response.Consolidation  ? response.Consolidation : []
      })
}

在这里，我们使用ternary operator组合成一个单独的setState调用，以将每个状态分配给response对象的数据或一个空数组。您会注意到每个条件都是基于response.key而不是response的-这更安全，而且不会引起错误（除非您绝对确定不可能存在{{1} }包含其中一些（但不是全部）键

更改日期不会在React Native中显示新数据

1 个答案: