React中如何正确遍历列表形式的tagList状态对象

代码报错的核心原因 #

你遇到的报错和遍历失败完全是几个基础语法错误导致的，和React本身无关：

• 所有for循环的判断条件写反：你写的是i > tagList.length，初始化i=0时，0大于任何正整数数组长度的判断结果都是false，循环根本不会执行，正确判断条件应为i < 目标长度。
• 属性拼写错误：报错信息里提示读取的是lenght属性，正确的长度属性名是length，你漏写了一个字母t。
• 非法属性访问：你写的tagList.tagList.length逻辑完全错误，tagList本身是你定义的数组状态，不存在名为tagList的子属性，访问不存在的属性会返回undefined，再读取length自然抛出类型错误。
• 类型判断语法错误：你写的typeOf tagList是非法语法，JS中判断类型的操作符是全小写的typeof，你控制台看到的object输出和这段错误代码无关。另外数组在JS中用typeof检测本来就会返回object，这是语言特性，判断数组请用Array.isArray()方法。
• 额外注意：React的state更新是异步的，调用setTagList后同步读取tagList拿到的还是旧值，不要在setState后立刻同步遍历状态。

你当前标签处理逻辑的问题 #

你现在用连续replace硬切割字符串的写法非常脆弱，只要原始字符串格式稍微变一点就会出问题，建议改成正则匹配的方式处理，不要手动逐次替换字符：

function makeListOfTags(tagLine) {
  const tagMatch = tagLine.match(/tagString:\s*(.*)/)
  if (!tagMatch) return []
  // 清除所有大括号、引号，按空白符分割，过滤空值
  return tagMatch[1]
    .replace(/[{}"]/g, '')
    .trim()
    .split(/\s+/)
    .filter(Boolean)
}

React中遍历数组的正确写法 #

React JSX中不支持直接写for循环渲染，标准遍历渲染方式是用数组的map方法：

// 状态定义
const [tagList, setTagList] = useState([])

// 拿到原始tag字符串后更新状态
useEffect(() => {
  setTagList(makeListOfTags(tagString))
}, [tagString])

// 渲染部分
return (
  <div className="tag-container">
    {tagList.map((tag, index) => (
      <span className="tag" key={index}>
        {tag}
      </span>
    ))}
  </div>
)

如果你是要在逻辑层遍历数组做处理（不是渲染），可以用修正后的for循环，记得先判断值是否为数组避免异常：

if (Array.isArray(tagList)) {
  for (let i = 0; i < tagList.length; i++) {
    const currentTag = tagList[i]
    // 自定义业务逻辑
  }
}

除了for循环和map，你也可以用forEach、for...of等合法的数组遍历方式，只要语法正确都可以正常运行。

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