react-native - 为什么我必须刷新才能看到更新图像的结果答案

【问题标题】：react-native - Why do I have to refresh to see the result of update imagereact-native - 为什么我必须刷新才能看到更新图像的结果
【发布时间】：2022-11-23 02:50:23
【问题描述】：

我仍然是反应的初学者。现在，我正在学习 react-native，我尝试上传一张照片，但屏幕只显示来自 redux 的每个数据的 undefined 值。

useEffect有问题吗？我想都是关于useEffect，希望有人能帮助我。这是代码：

import { getUserById, updateImageUser } from '../../stores/actions/user';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

const editProfile = props =>{
 const user = useSelector(state => state.user);

  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Cool Photo App Camera Permission',
          message:
            'Cool Photo App needs access to your camera ' +
            'so you can take awesome pictures.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );

      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the camera');
        const result = await launchCamera({
          selectionLimit: 1,
        });

        const formData = new FormData();
        formData.append('image', {
          name: result.assets[0].fileName,
          type: result.assets[0].type,
          uri: result.assets[0].uri,
        });
        const userId = await AsyncStorage.getItem('userId');
        const data = await dispatch(updateImageUser(userId, formData));
        // console.log(data);
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err.response);
    }
  };

return (
  <View style={styles.containerPhoto}>
    <TouchableOpacity
      onPress={() => requestCameraPermission()}
      style={styles.rounded}>
      {user.data?.image ? (
        <ImageBackground
          source={{
            uri: `https://res.cloudinary.com/atma-jaya-yogyakarta/image/upload/v1669068823/${user.data.image}`,
          }}
          style={{resizeMode: 'cover', width: '100%', height: '100%'}}
          borderRadius={50}
        />
      ) : (
        <Image source={require('../../assets/Avatar.png')} />
      )}
    </TouchableOpacity>
    <Text style={styles.name}>
      {user.data.name ? user.data.name : 'empty'}
    </Text>
    <Text style={styles.role}>
      {user.data.profession ? user.data.profession : 'empty'},{' '}
      {!user.data.nationality ? 'empty' : user.data.nationality}
    </Text>
  </View>
);

值为success，但是画面还是没有变化。我必须手动刷新它。请帮忙，我已经花了好几个小时了。

谢谢大家！

【问题讨论】：

不确定这是否有效，但您是否尝试过使用 Image 组件而不是 ImageBackground？
仍然没有工作伙伴:(
user.data 来自哪里？我在代码示例中没有看到它
对不起路易斯，我忘了添加它。这里的用户数据来自 const user = useSelector(state => state.user);那是来自选择器 redux
解决了！谢谢大家回复

标签： javascript react-native redux mobile rendering

【解决方案1】：

所以在我的例子中，我有一个名为 getUserById(userId) 的 redux 操作。所以我只是在这段代码下面再次调用它 const data = await dispatch(updateImageUser(userId, formData))。所以该函数将重新获取数据

【讨论】：