React生产构建出现array.map报错，开发环境运行正常该如何修复？

报错map is not a function核心原因是调用map的data变量不是数组类型。开发环境没有触发是因为本地接口返回稳定、请求响应速度快、本地Mock等因素掩盖了潜在的逻辑漏洞，生产环境的接口路径、返回结构、执行顺序差异触发了问题。

按照以下步骤依次排查修复即可：

• 检查data的初始化默认值，必须显式设置为空数组
  确保你的useState初始化写法为：

  const [data, setData] = useState([])
  

  如果初始值为undefined、null等非数组类型，首次渲染时访问data.length会直接抛出类型错误。
• 强化接口返回值的类型校验
  原逻辑直接判断res.data.length存在漏洞：如果生产环境接口因为报错、路径错误等原因返回对象、字符串、null等非数组结构，访问length属性直接抛出异常。修改接口回调逻辑如下：

  useEffect(() => {
      setLoading(true)
      let cancel
      axios.get('info', {
          cancelToken: new axios.CancelToken(c => cancel = c)
      }).then(res => {
          // 先判断返回值是不是数组，再做后续处理
          if(Array.isArray(res.data)) {
              setData(res.data)
          } else {
              setData([])
              // 排查问题时可以打开日志确认返回值结构
              // console.error('返回格式异常', res.data)
          }
      }).catch(err => {
          setData([])
      }).finally(() => {
          setLoading(false)
      })
  
      return () => cancel && cancel()
  }, [])
  

  同时补充了取消请求的判空逻辑，避免取消函数不存在时报错。
• 强化渲染层的判断逻辑
  给渲染逻辑加一层数组类型校验，彻底避免非数组场景报错：

  {Array.isArray(data) && data.length > 0 && data.map(row => (
      <TableRow
          key={row.name}
          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
          <TableCell component="th" scope="row">
              {row.name}
          </TableCell>
          <TableCell align="left">{row.value}</TableCell>
          <TableCell align="right">
              <CopyToClipboard text={row.value} onCopy={() => handleCopy()}>
                  <IconButton>
                      <ContentCopyIcon />
                  </IconButton>
              </CopyToClipboard>
              
              <IconButton aria-label="more" onClick={(e) => {
                  handleClick(e)
                  setItemId(row._id)
              }}>
                  <MoreVertIcon />
              </IconButton>
          </TableCell>
      </TableRow>
  ))}
  

• 排查生产环境接口路径
  你当前使用相对路径'info'发起请求，确认生产环境部署后，接口的实际访问路径是否正确，是否存在跨域、404、服务端报错等问题导致返回非预期的结构。

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