Question

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

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

我现在的逻辑是：

从服务器获取userData和主配置文件图像。
单击“编辑”按钮将打开图像选择器。
选择图片后，它会将状态imageChanged更改为true，然后useEffect激活并执行名为_uploadImage（）的函数；然后检查图像是否已设置或只是一个错误标志。
图像将通过使用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个状态并不断检查其中之一是否发生了更改以及问题所在那就是我不知道所选择图像的索引。

如何正确使用useEffect挂钩

0 个答案: