React Native：超过最大深度答案

【问题标题】：React Native: Maximum depth exceededReact Native：超过最大深度
【发布时间】：2021-01-18 18:49:25
【问题描述】：

我正在尝试更新 userProfile 图像但收到该错误

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 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 && (
            <Image style={styles.image} source={this.state.userImage} />
          )}
          {this.state.image && (
            <Image
              style={styles.edit}
              source={this.setState({ userImage: this.state.image })}
            />
          )}

谁能告诉我这是怎么回事？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

你可以这样做：

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

你也可以使用 image 组件的 onError 属性来改变 source 属性。

【讨论】：

Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_this.props.formikProps.setFieldValue') 我应该在哪里使用 setstate？
改变状态的目的是什么？
错误在你的formik行，注释掉并尝试运行代码。
我删除了它，但它没有将 userImage 设置为我从图库中选择的图像，因为我需要使用 setState，它在函数库中很容易

【解决方案2】：

移除 setState 因为它应该是匿名的，否则会在每次渲染时调用

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

应该是

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

顺便说一句，你不能在源道具中设置状态，因为它只能被赋予图片路径！

【讨论】：

那么我该如何纠正它我熟悉函数库但从未在类库中这样做过，你能帮忙吗？
Failed prop type: Invalid prop source` 提供给Image.` 得到了那个错误和那个警告promise rejection: TypeError: undefined is not an object (evaluating '_this.props.formikProps.setFieldValue
评论formik这一行。
我删除了它，但它没有将 userImage 设置为我从图库中选择的图像，因为我需要使用 setState，它在函数库中很容易