React中Promise链式调用.then()传递数组出现undefined问题求解

问题原因 #

Promise 链式调用规则为：前一个 .then() 回调函数的返回值，会作为下一个 .then() 回调的入参。你的代码中处理接口返回数据的 .then() 仅在内部定义了 dataRadar 变量，未主动返回该值，因此下一个 .then() 接收的入参默认是 undefined。

解决方案1：保留现有Promise链式写法 #

不需要调整现有逻辑结构，仅在处理接口数据的 .then() 末尾新增 return dataRadar 即可，修改后代码如下：

componentDidMount(){
    fetch(`https://api.nasa.gov/DONKI/CMEAnalysis?startDate=${this.state.time[0]}&endDate=${this.state.time[1]}&mostAccurateOnly=true&speed=500&halfAngle=30&catalog=ALL&api_key=${process.env.REACT_APP_APIKEY}`)
  .then(response => response.json())
  .then((data) => {   
        this.setState({coronaData:data})
        
        const dataRadar = {
            labels: ["speed", "halfAngle", "longitude", "latitude"],
            datasets: [
                {
                label: data[0].associatedCMEID,
                backgroundColor: "rgba(194, 116, 161, 0.5)",
                borderColor: "rgb(194, 116, 161)",
                data:  [65, 59, 90, 81]
                },

                {
                label: data[1].associatedCMEID,
                backgroundColor: "rgba(71, 225, 167, 0.5)",
                borderColor: "rgb(71, 225, 167)",
                data:  [65, 59, 90, 81]
                }
            ]
        }
        // 新增该行返回值即可解决参数传递问题
        return dataRadar
  })
  .then((dataRadar)=>{
      console.log(dataRadar)
      this.setState({dataRadar:dataRadar})
  })
}

额外提示：建议增加接口返回数据的长度判断，访问 data[0]、data[1] 前先校验数组长度是否足够，避免接口返回空数组时抛出取值报错。

解决方案2：改用async/await写法（推荐，可读性更强） #

如果项目支持ES7语法，async/await可以避免多层链式调用的逻辑割裂问题，还可以统一捕获请求、数据处理阶段的所有异常，代码更易维护：

async componentDidMount(){
  try {
    const response = await fetch(`https://api.nasa.gov/DONKI/CMEAnalysis?startDate=${this.state.time[0]}&endDate=${this.state.time[1]}&mostAccurateOnly=true&speed=500&halfAngle=30&catalog=ALL&api_key=${process.env.REACT_APP_APIKEY}`)
    const data = await response.json()
    // 边界判断避免取值报错
    if(!Array.isArray(data) || data.length < 2) return console.warn('接口返回数据不符合要求')

    this.setState({coronaData:data})
    const dataRadar = {
        labels: ["speed", "halfAngle", "longitude", "latitude"],
        datasets: [
            {
            label: data[0].associatedCMEID,
            backgroundColor: "rgba(194, 116, 161, 0.5)",
            borderColor: "rgb(194, 116, 161)",
            data:  [65, 59, 90, 81]
            },
            {
            label: data[1].associatedCMEID,
            backgroundColor: "rgba(71, 225, 167, 0.5)",
            borderColor: "rgb(71, 225, 167)",
            data:  [65, 59, 90, 81]
            }
        ]
    }
    console.log(dataRadar)
    this.setState({dataRadar})
  } catch (err) {
    console.error('请求或数据处理失败', err)
  }
}

内容的提问来源于stack exchange，提问作者luther wardle