React组件使用map遍历JSON时缺少返回值报错的问题咨询

问题原因分析 #

• Array.prototype.map() 是用于数组映射转换的方法，设计要求每个遍历的回调函数必须返回值，最终生成一个和原数组长度相同的新数组。你只是用它遍历做条件判断、不返回新数组的场景属于对map的误用，才会触发这个报错。
• 你当前在map循环里直接给this.state赋值的写法也有隐患：如果有多个url匹配的条目，state会被反复覆盖，且遍历过程中多次赋值也没有必要。

对应疑问解答 #

• map必须要有返回值吗？
  是的，只要你调用了map方法，回调就必须返回值，否则不符合该API的设计规范，就会触发你遇到的报错。
• 不需要返回值是不是该用for循环？
  可以用for循环，但有更合适的原生数组方法：Array.prototype.find()，专门用来返回数组中第一个满足条件的元素，比手动写for循环更简洁，性能也不会差。
• 能不能先找到匹配的JSON块再设置state？
  这才是更推荐的写法，先查找目标条目，再一次性给state赋值，逻辑更清晰，也不会出现反复赋值的问题。

正确实现代码 #

import React,{Component} from "react";
import topics from './topics.json';

class Tutorial extends Component {
  constructor(props){
    super(props);
    // 先查找匹配的topic
    const matchedTopic = topics.find(topic => topic.url === props.match.params.url);
    // 一次性赋值state，同时加了匹配不到的兜底逻辑
    this.state = {
      url: props.match.params.url,
      name: matchedTopic ? matchedTopic.name : '未找到对应内容'
    };
  }

  render() {
    return (
      <div className="Tutorial">
        <div className="ca-nav-spacer w3-hide-small"></div>
        {this.state.name}
        {this.state.url}
      </div>
    );
  }
}

export default Tutorial;

可选优化方案 #

如果你的项目支持类属性新语法，还可以省略constructor，写法更简洁：

import React,{Component} from "react";
import topics from './topics.json';

class Tutorial extends Component {
  state = {
    url: this.props.match.params.url,
    name: topics.find(topic => topic.url === this.props.match.params.url)?.name || '未找到对应内容'
  }

  render() {
    return (
      <div className="Tutorial">
        <div className="ca-nav-spacer w3-hide-small"></div>
        {this.state.name}
        {this.state.url}
      </div>
    );
  }
}

export default Tutorial;

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