AWS入门者求助：DynamoDB的scan函数为何执行两次？

问题原因 #

• 你将dynamodb.scan直接写在React组件函数的顶层代码中，React在开发模式的严格模式下，会触发两次组件渲染（用于检测非预期的副作用），每次渲染都会执行一遍顶层代码，导致scan被调用两次。
• React组件函数每次渲染时，顶层的所有代码都会重新执行，这是组件渲染的固有机制。

解决方案 #

使用React的useEffect副作用钩子包裹dynamodb.scan，确保仅在组件挂载时执行一次：

import { useEffect, useState } from 'react';

const params = {
    TableName: DataTableName
};

const Selection = () =>{
    // 声明状态存储从DynamoDB获取的数据
    const [myData, setMyData] = useState([]);

    // 用useEffect包裹异步请求，控制执行时机
    useEffect(() => {
        dynamodb.scan(params, (err, data) => {
            if(err) {
                console.log(err, err.stack);
                return;
            }
            console.log(data);
            // 将获取到的数据存入状态，更新组件
            setMyData(data.Items);
            console.log("abcdefg");
        });
    }, []); // 空依赖数组：仅在组件首次挂载时执行一次

    return(
        <Flex direction="column">
            <SelectField
                label="Animals"
                options={myData}
            ></SelectField>
        </Flex>    
    )
};

额外说明 #

• 空依赖数组[]是关键，它告诉React这个副作用不需要依赖任何变量，仅在组件挂载时执行一次，避免重复调用scan。
• 用useState管理数据，当获取到DynamoDB的结果后，通过setMyData更新状态，自动触发组件重新渲染，将数据传递给SelectField的options。
• 生产模式下React会关闭严格模式的双重渲染，但开发模式下这个机制是为了帮你提前发现副作用问题，所以使用useEffect处理异步请求是React的规范做法。

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