react-native - 如何正确重用 useEffect 挂钩

Question

我现在正在从基于类的组件切换到带有钩子的函数，我需要一些时间来适应它。

我希望用户能够上传一个主要的个人资料图片和 6 个辅助图像，这些图像将被上传到服务器。我已经创建了处理主要个人资料图片上传的逻辑，但现在我想重新使用该逻辑来使用相同的代码将其他图片上传到服务器。

我现在的逻辑是：

1. 从服务器获取 userData 和主要配置文件图像。
2. 单击编辑按钮时，它将打开一个图像选择器。
3. 选择图片后，它会将名为 imageChanged 的​​状态更改为 true，然后 useEffect 激活并执行名为 _uploadImage(); 的函数；然后检查图像是否已设置，或者它是否只是一个错误标志。
4. 图像将使用 PHP 上传到服务器。

这是我的个人资料屏幕：

const [selectedImage, setSelectedImage] = useState(null);
const [imageChanged, setimageChanged] = useState(null);

useEffect(() => {
        function _uploadImage() {
            if (imageChanged !== null) {
                var data = new FormData();
                data.append('action', 'uploadProfileImage');
                data.append('profileID', userInfo.ProfileId);
                data.append('file', {
                    uri: selectedImage.uri,
                    type: 'image/jpg',
                    name: 'tempimage.jpg'
                });
                fetch('', {
                    method: 'POST',
                    body: data,
                    headers: {
                        Accept: 'application/json'
                    }
                })
                    .then(response => response.json())
                    .then(responseJson => {
                        if (responseJson[0].Result == 1) {
                            console.log(responseJson)
                        } else {
                            //alert('Niet gelukt, probeer het later opnieuw')
                        }
                        setimageChanged(false);
                    });
            }
        };

        _uploadImage();
    }, [selectedImage])

async function _pickImage() {
        let result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            aspect: [4, 3],
            mediaTypes: 'Images',
            quality: 0.7
        });
        if (!result.cancelled) {
            if (result.type === 'image') {
                setSelectedImage(result);
                setimageChanged(true);
            } else {
                alert('Upload een geldige image');
                console.log('No image found');
            }
        }
    };

这是渲染：

<Card
    containerStyle={{
        padding: 0,
        marginTop: 30,
        marginRight: 0,
        marginLeft: 0,
        alignItems: 'center'
    }}
>
    <Avatar
        source={{ uri: '?time=' + Date.now() }}
        size="xlarge"
        rounded
        showEditButton={true}
        editButton={{ size: 30 }}
        onEditPress={() => {
            _pickImage();
        }}
        title={'n'}
    />
    <Text>
        {userInfo.FirstName + ' ' + userInfo.LastName}
    </Text>
    <Text>
        {userInfo.BirthDate + ' Jaar, ' + userInfo.City}
    </Text>
</Card>
<Card
    containerStyle={{
        padding: 0,
        marginTop: 30,
        marginRight: 0,
        marginLeft: 0,
        alignItems: 'center'
    }}
>
    <FlatList style={{ margin: 5 }}
        data={[0, 1, 2, 3, 4, 5]}
        numColumns={3}
        keyExtractor={(item, index) => item.id}
        renderItem={(item) => <TouchableOpacity onPress={() => { _pickImage() }}><View key={item.id} style={{ width: 100, margin: 3.5, borderRadius: 10, justifyContent: 'center', backgroundColor: '#ddd', height: 100 }}><Text style={{ textAlign: 'center', fontSize: 20 }}>+</Text></View></TouchableOpacity>}
    />
</Card>

所以总而言之，我希望能够重新使用pickimage和上传图像代码来上传其他照片，但我想避免在顶部声明6个状态并不断检查其中一个是否发生变化，那么问题是我不知道所选图像的索引。

标签： react-nativereact-hooks