本机反应:超过最大深度

Question

我试图更新用户配置文件图像，但得到错误

超过了最大更新深度。当组件重复调用组件WillUpdate或组件DidUpdate中的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 })}
            />
          )}

有人能告诉我这是怎么回事吗？

Answer 1

恢复 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}
            />
          )}

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

Answer 2

你可以这样做：

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

您还可以使用图像组件的onError属性来更改源属性。