React中调用API使用可选链是否是最佳实践？还有哪些替代方案？

当前实现合理性说明 #

你的代码虽然可以正常运行，但存在两处可优化的问题：

1. 可选链在这里属于冗余用法：你在state中已经将data初始化为空数组，不存在undefined或null的情况，this.state.data?.length完全可以直接写为this.state.data.length
2. 你之前用loading状态判断失败的核心原因是代码逻辑错误：this.setState({loading: false})被写在了fetch异步逻辑的外部，会在调用接口后立刻执行，根本不会等待接口返回结果，导致loading状态完全失效。

其他可用实现方式 #

• 修正loading逻辑后用loading状态做判断：加载过程中显示加载提示，接口返回后再渲染对应数据
• 直接通过数组长度判断：不需要可选链，直接写this.state.data.length > 0 && 渲染逻辑即可
• 用三元运算符做兜底渲染：如果没有拿到数据，显示默认占位文本，避免页面出现空白区域

最优实现方式 #

最优方案是修正loading逻辑的位置，用loading状态区分加载中和加载完成的渲染逻辑，同时做异常场景的兜底，完整可运行代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: true,
      error: false
    }
  }
  
  componentDidMount() {
    fetch('https://restcountries.eu/rest/v2/all')
      .then(response => response.json())
      .then(json => this.setState({data: json}))
      .catch(err => this.setState({error: true}))
      // 不管请求成功失败，最后都把loading设为false
      .finally(() => this.setState({loading: false}));
  }
  
  
  render() {
    // 加载中状态
    if(this.state.loading) {
      return <div>加载中...</div>
    }
    // 请求失败状态
    if(this.state.error) {
      return <div>加载失败，请稍后重试</div>
    }
    return (
      <div>
        <h1>{this.state.data.length > 0 ? this.state.data[0]["name"] : "暂无数据"}</h1>
      </div>
    )
  }
}

export default App;

这个方案的优势是覆盖了加载中、请求失败、无数据的全部边界场景，逻辑清晰易维护，不会出现页面空白或渲染报错的问题。

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