React Native Expo环境下多图上传预览重复及报错如何解决？

问题原因 #

• 不允许直接修改useState声明的状态变量：multiImages是通过useState声明的响应式状态，你直接调用push方法修改原数组属于非法的状态变更，会导致状态更新逻辑异常，必须通过配套的setMultiImages方法更新状态。
• 图片重复是逻辑错误导致：你先把base64格式的图片地址push到了multiImages数组，调用setImages时又用concat把本地路径格式的result.uri也追加到数组中，一次选择操作就添加了2个不同格式的同一张图片，自然会渲染出2张重复图。
• 列表key不符合规范：用item + index作为列表key，当数组元素出现重复时会产生重复key，触发React的列表渲染警告。

修复后代码 #

// 不需要单独维护两个数组，按需统一存储base64地址或者本地uri即可，避免重复添加
const [images, setImages] = useState([])

const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            base64: true,
            aspect: [4, 4],
            quality: 0.3,
        })

        if (!result.cancelled) {
            // 示例统一存储base64格式，如果需要用本地uri就替换为result.uri即可
            let imageUri = `data:image/jpg;base64,${result.base64}`
            // 基于原状态生成新数组，不直接修改原状态
            setImages(prev => [...prev, imageUri])
        }
    }

return(
<>
{images.map((item) => {
    // 确保uri唯一的前提下直接用uri作为key即可
    return (
        <Image key={item} style={styles.imageClip} source={{ uri: item }} />
    )})}
</>
)

内容的提问来源于stack exchange，提问作者jonson.ncube