React从Node服务器取数后无法map遍历：状态非函数报错

看起来你遇到的核心问题有两个：一是更新state时触发了"不是函数"的错误，二是需要正确提取Promise返回结果里的recordset数组来遍历。我来帮你一步步拆解解决：

首先，排查"state不是函数"的常见原因 #

这个错误90%的情况是把state变量和更新state的函数搞混了，或者初始化/更新state的语法有误：

1. 函数组件的错误示例（最常见） #

如果你用的是函数组件，错误写法可能是这样的：

// 错误：没正确解构出更新函数，或者误用state变量当函数调用
const [records] = useState([]); // 缺失setRecords
// 或者
records(data.recordset); // records是数组，不是函数，触发报错

正确的写法应该是解构出setState函数，并初始化为空数组（避免map时报错）：

const [records, setRecords] = useState([]);

2. 类组件的错误示例 #

如果是类组件，错误通常是直接调用this.state()而不是this.setState()：

// 错误
this.state({ records: data.recordset });
// 正确
this.setState({ records: data.recordset });

然后，正确提取并存储recordset数组 #

你需要确保在fetch请求完成后，正确提取返回结果里的recordset部分再存入state，以下是完整的代码示例：

函数组件完整实现 #

import { useState, useEffect } from 'react';

function RecordList() {
  // 初始化state为空数组
  const [records, setRecords] = useState([]);

  useEffect(() => {
    fetch('http://你的Node服务器接口地址')
      .then(res => {
        // 先校验请求是否成功
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json(); // 将响应转为JSON对象
      })
      .then(responseData => {
        // 打印确认数据结构，确保recordset是数组
        console.log('返回的数据:', responseData);
        setRecords(responseData.recordset);
      })
      .catch(err => {
        console.error('获取数据出错:', err);
      });
  }, []); // 空依赖数组，组件挂载时仅请求一次

  // 遍历渲染数据
  return (
    <div className="record-container">
      {records.map((item) => (
        // 优先用数据里的唯一ID作为key，避免索引key的潜在问题
        <div key={item.id} className="record-item">
          <p>名称：{item.name}</p>
          <p>详情：{item.description}</p>
        </div>
      ))}
    </div>
  );
}

export default RecordList;

类组件完整实现 #

import React, { Component } from 'react';

class RecordList extends Component {
  constructor(props) {
    super(props);
    this.state = { records: [] };
  }

  componentDidMount() {
    fetch('http://你的Node服务器接口地址')
      .then(res => {
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json();
      })
      .then(responseData => {
        this.setState({ records: responseData.recordset });
      })
      .catch(err => {
        console.error('获取数据出错:', err);
      });
  }

  render() {
    const { records } = this.state;
    return (
      <div className="record-container">
        {records.map((item) => (
          <div key={item.id} className="record-item">
            <p>名称：{item.name}</p>
            <p>详情：{item.description}</p>
          </div>
        ))}
      </div>
    );
  }
}

export default RecordList;

最后，额外排查点 #

1. 确认数据结构：在then回调里打印responseData，确保responseData.recordset确实是数组，而非undefined或其他类型。
2. 处理异步加载状态：如果需要优化体验，可以添加加载状态提示，比如在请求未完成时显示"加载中..."。
3. key值规范：遍历数组时务必使用唯一key，优先用数据自带的ID（如item.id），避免用索引当key（数组排序/增删时会引发渲染问题）。

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