React组件中DynamoDB营养数据通过Object.entries.map无法渲染，遗漏了什么步骤？

我在DynamoDB中存储了一些数据，希望将营养信息以列表形式展示，相关代码如下：

AwsFunctions.js #

export function Nutrients(props) {

    // Load the AWS SDK for Node.js
    var AWS = require('aws-sdk');

    // Create DynamoDB service object
    var ddb = new AWS.DynamoDB({apiVersion: '2012-08-10'});

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

    var params = {
        ExpressionAttributeValues: {':title' : {'S' : props.title}},
        KeyConditionExpression: 'title = :title',
        ProjectionExpression: 'nutrients',
        TableName: props.tableName,
    };

    useEffect(() => {
        ddb.query(params, function (err, data) {
        if (data) {
            setData(data['Items'][0]['nutrients']['M']);
        } else {
            console.log(err);
        }
        });
    }, [props.title]);

    console.log(data)

    return Object.entries(data).map(([key, value]) => {
        console.log(key, value['S']);
        <li key={key}>{key} {value['S']}</li>
    })

}

Recipe.js #

import {Nutrients} from './AwsFunctions';

export const Recipe = () => {
    const path = window.location.pathname
    var title = path.replace(/%20/g, " ")
    var title = title.replace('/','')
    var nutrients = <Nutrients tableName='recipes' title={title}/>
    return (<div><ul>{nutrients}</ul></div>);
 }

控制台能正常打印数据，但页面无法渲染该列表，请问我遗漏了什么步骤？

1. 核心问题：map函数未返回JSX元素 #

你的Nutrients组件中，Object.entries(data).map的箭头函数使用了大括号，但没有显式返回<li>元素。箭头函数在使用大括号时必须写return，否则默认返回undefined，导致没有内容渲染。

修改方式二选一：

• 显式添加return：

  return Object.entries(data).map(([key, value]) => {
      console.log(key, value['S']);
      return <li key={key}>{key} {value['S']}</li>;
  });
  

• 去掉大括号，使用隐式返回：

  return Object.entries(data).map(([key, value]) => (
      <li key={key}>{key} {value['S']}</li>
  ));
  

2. 优化：初始状态与数据类型匹配 #

你初始化data为数组[]，但从DynamoDB获取的nutrients是对象类型（M类型对应JS对象）。将初始状态改为对象更合理，避免不必要的空数组处理：

const [data, setData] = useState({});

3. 修复查询结果的错误处理漏洞 #

当前if (data)的判断逻辑有问题：即使查询没有匹配到数据，data依然会存在（只是Items为空数组），此时访问data['Items'][0]会触发Cannot read properties of undefined错误。补充判断Items是否有数据：

useEffect(() => {
    ddb.query(params, function (err, data) {
        if (err) {
            console.error(err);
            return;
        }
        if (data.Items.length > 0) {
            setData(data.Items[0].nutrients.M);
        } else {
            console.log("未找到对应营养数据");
            setData({});
        }
    });
}, [props.title]);

4. 避免闭包导致的参数过时问题 #

params依赖props.title和props.tableName，但当前定义在组件顶层，useEffect的依赖项不完整，可能导致使用旧参数查询。建议将params移到useEffect内部，并补充完整依赖：

useEffect(() => {
    const params = {
        ExpressionAttributeValues: {':title' : {'S' : props.title}},
        KeyConditionExpression: 'title = :title',
        ProjectionExpression: 'nutrients',
        TableName: props.tableName,
    };
    ddb.query(params, function (err, data) {
        // ... 处理逻辑
    });
}, [props.title, props.tableName]);

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