React中API返回空JSON数据时如何正确渲染不同组件

问题根因 #

你只对displayDefinition做了非undefined判断，但displaySynonym、displayAntonym两个数组状态没有做兜底处理：

1. 接口返回有效释义但单词没有同义词/反义词时，这两个字段会返回undefined/空值，进入主渲染分支后调用map直接报错
2. 搜索未找到单词时你大概率只重置了displayDefinition为undefined，没有同步处理另外两个字段的状态，后续搜索有效单词时如果漏了给这两个字段赋值，也会遗留异常状态
3. 空数组本身可以调用map不会报错，只有值为undefined/null时才会触发该类型错误。

修复方案 #

1. 状态初始化统一兜底

给所有数组类型的状态设置默认值为空数组，不要用undefined作为初始状态：

constructor(props) {
  super(props);
  this.state = {
    searchWord: '',
    displayWord: '',
    displayDefinition: [], // 数组类型默认空数组
    displaySynonym: [],
    displayAntonym: []
  }
}

2. 优化接口请求的状态赋值逻辑

在handleSubmit的API回调中统一处理状态：

• 单词存在时，把接口返回的释义、同义词、反义词分别赋值，没有对应字段就赋值为空数组
• 单词未找到时，把displayDefinition设为null（作为未找到的判断标记，比undefined语义更明确），另外两个字段保持为空数组即可

3. 重写渲染逻辑

避免重复写表单代码，同时给每个列表加空状态兜底：

render() {
  return (
    <div>
      {/* 表单统一写一次，绑定onSubmit事件避免页面默认刷新 */}
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="searchWord"
          placeholder="Search a Word"
          onChange={this.handleChange}
        />
        <button type="submit">Search</button>
      </form>

      {/* 先判断是否未找到 */}
      {this.state.displayDefinition === null ? (
        <h1>未找到该单词</h1>
      ) : this.state.displayDefinition.length > 0 ? (
        {/* 有查询结果的场景 */}
        <div>
          <h2>Search Results for: {this.state.displayWord}</h2>
          <h3>Definition</h3>
          <ol>
            {this.state.displayDefinition.map((item, index) => <li key={index}>{item.definition} ({item.partOfSpeech})</li>)}
          </ol>

          <h3>Synonyms</h3>
          <ol>
            {this.state.displaySynonym.length ? 
              this.state.displaySynonym.map((item, index) => <li key={index}>{item}</li>) : 
              <li>暂无同义词</li>
            }
          </ol>
          <h3>Antonyms</h3>
          <ol>
            {this.state.displayAntonym.length ? 
              this.state.displayAntonym.map((item, index) => <li key={index}>{item}</li>) : 
              <li>暂无反义词</li>
            }
          </ol>
        </div>
      ) : null}
    </div>
  )
}

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