React中Axios的使用及数组内对象属性访问报错问题求助

这个报错的核心原因很好理解：组件第一次渲染时，你的quotes状态还是空数组[]，此时this.state.quotes[0]是undefined，尝试访问undefined的quote属性自然会抛出TypeError。

你看到console.log(this.state.quotes[0])“正常运行”是浏览器控制台的小陷阱——它会动态更新对象的引用显示，你看到的其实是请求完成后更新的state值，而第一次渲染时它确实是undefined。

下面给你几种可靠的解决方案：

1. 使用可选链操作符（最推荐） #

ES2020引入的可选链?.可以安全访问嵌套属性，当左侧值为undefined或null时，会直接返回undefined而不报错：

render(){
  console.log(this.state.quotes[0]?.quote); // 第一次渲染返回undefined，不会触发报错

  return (
    <div>
      {/* 渲染时也可以用同样的方式处理 */}
      <p>{this.state.quotes[0]?.quote || '加载中...'}</p>
      <p>{this.state.quotes[0]?.author || ''}</p>
    </div>
  );
}

2. 先判断数组长度再访问属性 #

通过检查数组是否有元素，确保存在内容后再访问属性：

render(){
  if (this.state.quotes.length > 0) {
    console.log(this.state.quotes[0].quote);
  } else {
    console.log('名言数据加载中...');
  }

  return (
    <div>
      {this.state.quotes.length === 0 ? (
        <p>正在加载名言...</p>
      ) : (
        <div className="quote-card">
          <blockquote>"{this.state.quotes[0].quote}"</blockquote>
          <cite>— {this.state.quotes[0].author}</cite>
        </div>
      )}
    </div>
  );
}

3. 初始化状态时提供默认结构（仅作参考，不推荐） #

你可以给quotes初始化一个包含空对象的数组，这样第一次访问属性时不会报错，但会得到undefined：

state = { quotes: [{}] } // 初始化带空对象的数组

这种方法不够直观，不如前两种清晰，所以一般不推荐使用。

修改后的完整组件示例：

class Quote extends React.Component{
  state = { quotes : [] }
  componentDidMount(){
    axios.get('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
      .then(res=>{
        this.setState({ quotes: res.data.quotes })
      })
      .catch(err => {
        console.error('请求名言数据失败:', err);
      })
  }
  render(){
    // 安全访问属性
    console.log(this.state.quotes[0]?.quote);

    return (
      <div className="quote-container">
        {this.state.quotes.length === 0 ? (
          <div className="loading">正在加载名言...</div>
        ) : (
          <div className="quote-card">
            <p>"{this.state.quotes[0].quote}"</p>
            <p className="author">— {this.state.quotes[0].author}</p>
          </div>
        )}
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者Yu Takaki