React JS中如何遍历JSON对象？Node.js全栈新手开发问题求助

你当前后端/posty接口返回的结构为[{name: 用户名, text: 完整博客数组}]，外层posty数组仅含1个元素，你之前只遍历了外层数组，且固定取text下标为0的内容，因此只能输出第一条博客。

推荐优先优化后端返回结构，让数据格式更清晰，也可以仅修改前端适配现有结构：

方案1：优化后端返回结构（推荐） #

后端代码修改 #

app.get('/posty', (req,res) => {
   if (req.session.user && req.cookies.user_id) {
      Blog.find({name : "my_user"}).exec(function(err, blogs) {   
         if (err) {
            // 不要直接抛错，返回标准化错误响应
            return res.status(500).json({error: '数据查询失败'});
         }
         // 直接返回对象，无需包裹多余外层数组，结构更清晰
         res.json({
            name: req.session.user.name,
            blogs: blogs
         });
      })
   } else {
      // 接口请求不要返回重定向，前端fetch默认不处理302跳转，直接返回401状态码
      res.sendStatus(401);
   }
});

对应前端代码修改 #

import logo from './logo.svg';
import './App.css';
import Texts from './components/texts/texts';
import React, { Component } from 'react';

class App extends Component {
  // 状态和返回结构一一对应，类型匹配
  state = { 
    userName: '',
    blogs: []
  }
  
  componentDidMount() {
    fetch('/posty')
      .then(res => {
        // 先判断请求是否成功，避免接口报错导致白屏
        if (!res.ok) throw new Error('请求失败，请先登录');
        return res.json();
      })
      .then(data => this.setState({
        userName: data.name,
        blogs: data.blogs
      }))
      .catch(err => console.error(err));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Texts></Texts>
          <p>当前用户：{this.state.userName}</p>
          <ul> 
            {/* 直接遍历完整博客数组即可输出所有内容 */}
            {this.state.blogs.map(blog => 
              <li key={blog._id}>{blog.content}</li>
            )}
          </ul>
        </header>
      </div>
    );
  }
}

export default App;

方案2：不改后端，仅修改前端适配现有结构 #

直接遍历外层数组第一个元素的text字段即可，加可选链做兜底避免数据未加载时报错：

// render函数里的列表部分替换为以下代码
<ul> 
  {this.state.posty[0]?.text?.map(blog => 
    <li key={blog._id}>{blog.content}</li>
  ) || <li>暂无博客内容</li>}
</ul>

• 异常处理：后端接口不要直接throw err，主动返回对应状态码和错误提示；前端fetch要加请求成功判断和catch捕获逻辑，避免接口异常导致页面白屏
• 列表key规范：遍历列表的key不要用可能重复的name字段，优先用Mongoose自动生成的唯一_id字段，避免React渲染警告
• 登录判断逻辑：纯数据接口不要返回302重定向，前端fetch默认不会处理跳转逻辑，未登录时统一返回401状态码，前端收到401后手动跳转登录页即可
• 嵌套属性兜底：访问多级嵌套属性时加可选链?.，避免数据还未请求完成时访问属性报错
• 调试工具：开发阶段可以用Postman调试后端接口、用React DevTools调试前端状态，排查问题效率更高

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