React中如何遍历state内存储的API返回JSON数据

你的代码一共有4个直接导致运行失败的问题，逐个修正即可：

• 语法错误：constructor下方多了半截输入的com，直接删除即可，否则代码编译阶段就会报错。
• 初始值类型错误：myData初始值设为了空对象{}，但组件首次渲染时接口还没返回数据，你直接对对象调用.map()方法会直接抛出xxx.map is not a function的错误——.map()是数组专属方法，要渲染列表的state初始值必须设为空数组[]。
• 数据层级读取错误：你接口返回的结构最外层是boards数组，items是嵌套在每个board对象下的字段，你直接把整个res.data赋值给myData，拿到的是带boards属性的对象，根本不是要渲染的列表数组。
• JSX语法错误：你map回调里写的<div>property</div>是直接渲染固定字符串property，不是渲染遍历出的变量，JSX里渲染JS变量必须用{}包裹。

分步修复 #

1. 修正state初始值

this.state = {
  setData:{},
  settings: {},
  myData: [], // 改为空数组，匹配后续列表类型
};

2. 修正接口返回值的读取逻辑，加基础容错避免接口结构异常时页面崩溃

componentDidMount() {
  monday
    .api('query { boards( ids : 2664704591 ) { items { id : name column_values(ids : "ubicaci_n") { text }}}}')
    .then(res => {
      const boards = res.data?.boards || [];
      // 你查询的是单个id的board，直接取第一个board下的items即可
      const items = boards[0]?.items || [];
      this.setState({myData: items});
    });
}

3. 修正render里的列表渲染逻辑，遍历数组时记得给列表项加唯一key，变量用花括号包裹

<div>
  {this.state.myData.map((item) => {
    const location = item.column_values?.[0]?.text || '无位置信息';
    return (
      <div key={item.id}>
        <p>姓名：{item.id}</p>
        <p>位置：{location}</p>
      </div>
    )
  })}
</div>

修复后完整代码 #

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      setData:{},
      settings: {},
      myData: [],      
    };
  }

  componentDidMount() {
    monday
      .api('query { boards( ids : 2664704591 ) { items { id : name column_values(ids : "ubicaci_n") { text }}}}')
      .then(res => {
        const boards = res.data?.boards || [];
        const items = boards[0]?.items || [];
        this.setState({myData: items})
      });
  }
  
  render() {    
    return (
      <div className="App">
        <AttentionBox
          title="hola"
          text="Let's start building your amazing app, which will change the world!"          
        />
        <div className="btn btn-primary"></div>
        <button className="btn btn-warning"></button>
        <div>
          {this.state.myData.map((item) => {
            const location = item.column_values?.[0]?.text || '';
            return (
              <div key={item.id}>
                <div>姓名：{item.id}</div>
                <div>位置：{location}</div>
              </div>
            )
          })}
        </div>        
      </div>
    );
  }
}

export default App;

排错小提示 #

• 拿到接口响应后先打印完整结构确认层级，不要凭猜测取字段
• 用于列表渲染的state初始值统一设为空数组，从根源避免map方法不存在的报错
• JSX中所有JS变量、表达式都要用{}包裹，否则会被识别为普通文本

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