Блог

Я пытаюсь обновить изображение пользовательского профиля, но получаю эту ошибку

Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate . React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

вот мой код

 class Profile extends Component {
  state = {
    userImage: require("../assets/cena.jpg"),
    userName: "John Cena",
    userInfo: "The champ is here",
    modal: false,
    image: null,
    hasCameraPermission: null,
  };

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    this.setState({ hasCameraPermission: status === "granted" });
  }

  pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
    });

    if (!result.cancelled) {
      this.setState({ image: result.uri });
      this.props.formikProps.setFieldValue("image", result.uri);
    }
  };

  closeModal = () => {
    this.setState({ modal: false });
  };

  render() {
    
    return (
      <SafeAreaView style={styles.screen}>
        <View style={styles.container}>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={this.pickImage}
            style={styles.TouchableOpacityStyle}
          >
            <MaterialCommunityIcons
              name="camera"
              size={30}
              color={colors.white}
            />
          </TouchableOpacity>
          {!this.state.image amp;amp; (
            <Image style={styles.image} source={this.state.userImage} />
          )}
          {this.state.image amp;amp; (
            <Image
              style={styles.edit}
              source={this.setState({ userImage: this.state.image })}
            />
          )}
  

может кто-нибудь сказать мне, что происходит?

Вы можете просто сделать это следующим образом :

     {this.state.image ? (
            <Image style={styles.image} source={this.state.userImage} />
          ) :  (
            <Image
              style={styles.edit}
              source={this.state.userImage}
            />
          )}
  

Вы также можете использовать onError prop компонента image для изменения исходного кода.

измените setState так, как оно должно быть анонимным, иначе будет вызываться при каждом рендеринге

  {this.state.image amp;amp; (
            <Image
              style={styles.edit}
              source={this.setState({ userImage: this.state.image })}
            />
          )}

  

должно быть

  {this.state.image amp;amp; (
            <Image
              style={styles.edit}
              source={this.state.image}
            />
          )}
  

кстати, вы не можете setState в исходном реквизите, так как ему будет указан только путь к изображению!