React项目警告：渲染TattooForm时无法更新App组件

问题原因 #

1. 异步状态更新导致逻辑错误：setSelectedBodyPart是异步更新方法，调用后selectedBodyPart不会立刻变为新值，此时调用handleUploadedImages({ [selectedBodyPart]: imageUrl })，键值会是初始的空字符串，最终父组件uploadedImages会得到{"": imageUrl}这种不符合预期的结构。
2. 跨组件状态更新时机冲突：在子组件的事件处理函数中，先触发自身状态更新，紧接着同步调用父组件的状态更新方法，React会检测到在TattooForm的状态更新流程中，触发了App组件的状态更新，从而抛出警告。

解决方案 #

方案一：直接使用新值，不依赖未更新的子组件状态 #

既然要把imageUrl同时设置为子组件状态和父对象的键值，直接用imageUrl作为键即可，无需等待子组件状态更新：

const TattooForm = ({ handleUploadedImages }) => {
    const [selectedBodyPart, setSelectedBodyPart] = useState("");

    const handleImageChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const imageUrl = URL.createObjectURL(file);
            setSelectedBodyPart(imageUrl);
            // 直接用imageUrl作为键，避免依赖未更新的selectedBodyPart
            handleUploadedImages({ [imageUrl]: imageUrl });
        }
    };

    return (
        <div>
            <input type="file" onChange={handleImageChange} />
        </div>
    );
};

方案二：用useEffect监听子组件状态变化，再更新父组件 #

通过useEffect监听selectedBodyPart的变化，确保子组件状态更新完成后，再触发父组件的状态更新，彻底避免时机冲突：

const TattooForm = ({ handleUploadedImages }) => {
    const [selectedBodyPart, setSelectedBodyPart] = useState("");

    // 监听selectedBodyPart变化，更新父组件状态
    useEffect(() => {
        if (selectedBodyPart) {
            handleUploadedImages({ [selectedBodyPart]: selectedBodyPart });
        }
    }, [selectedBodyPart, handleUploadedImages]);

    const handleImageChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const imageUrl = URL.createObjectURL(file);
            setSelectedBodyPart(imageUrl);
        }
    };

    return (
        <div>
            <input type="file" onChange={handleImageChange} />
        </div>
    );
};

额外注意事项 #

使用URL.createObjectURL后，记得在组件卸载时调用URL.revokeObjectURL释放资源，避免内存泄漏：

useEffect(() => {
    return () => {
        if (selectedBodyPart) {
            URL.revokeObjectURL(selectedBodyPart);
        }
    };
}, [selectedBodyPart]);

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