Блог

Я создал экран редактирования и пытаюсь обновить значение post через navigation v4 с помощью getParams и set setParams, но когда я меняю старое значение и нажимаю кнопку сохранить, чтобы сохранить его, оно не обновляется, и ошибка также не отображается. Он все еще показывает старые значения. Может кто-нибудь, пожалуйста, помогите мне, ниже приведен мой код

EditScreen.js

 class EditScreen extends Component {

  render() {
    const { params } = this.props.navigation.state;
    return (
      <KeyboardAvoidingView
        behavior="position"
        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}
      >
        <Image
          style={styles.image}
          source={this.props.navigation.getParam("image")}
        />

        <View style={styles.detailContainer}>
          <AppTextInput
            value={this.props.navigation.getParam("title")}
            onChangeText={(text) =>
              this.props.navigation.setParams({ title: text })
            }
          />
          <AppTextInput
            value={this.props.navigation.getParam("des")}
            onChangeText={(text) =>
              this.props.navigation.setParams({ des: text })
            }
          />
        </View>
        <AppButton
          text="Save"
          style={styles.button}
          onPress={() => {
            this.props.navigation.getParam("onEdit");
            this.props.navigation.goBack();
          }}
        />
      </KeyboardAvoidingView>
  

Home.js

 class Home extends Component {
  state = {
    modal: false,
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
      {
        key: "2",
        title: "John Cena",
        des: "As you can see, You can't see me!",
        image: require("../assets/cena.jpg"),
      },
    ],
  };

  onEdit = (data) => {
    const newPosts = this.state.post.map((item) => {
      if (item.key === data.key) return data;
      else return item;
    });
    this.setState({ post: newPosts, editMode: false });
  };

  render() {
    return (
      <Screen style={styles.screen}>
        <FlatList
          data={this.state.post}
          renderItem={({ item }) => (
            <>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                  this.props.navigation.navigate("Edit", {
                    image: item.image,
                    title: item.title,
                    des: item.des,
                    onEdit: this.onEdit,
                  })
                }
                style={styles.Edit}
              >
                <MaterialCommunityIcons
                  name="playlist-edit"
                  color="green"
                  size={35}
                />
              </TouchableOpacity>
              <Card onPress={() => this.props.navigation.push("Details", item)}>
                <Image style={styles.image} source={item.image} />
                <View style={styles.detailContainer}>
                  <Text style={styles.title} numberOfLines={1}>
                    {item.title}
                  </Text>
                  <Text style={styles.subTitle} numberOfLines={2}>
                    {item.des}
                  </Text>
                </View>
              </Card>
            </>
  

Я рекомендую вам сохранить данные в состоянии компонента:

 constructor(props) {
 super(props);
 // get the data that you need from navigation params
 const { key, title, ..} = this.props.navigation.state.params
 this.state = {key, title, ..}
}
  

затем :

   <AppTextInput
    value={this.state.title}
    onChangeText={(text) =>
      this.setState({ title: text })
    }
  />

    <AppButton
      text="Save"
      style={styles.button}
      onPress={() => {
        this.props.navigation.getParam("onEdit")(this.state);
        this.props.navigation.goBack();
      }}
    />
  

Может быть, попробуйте это:

 <AppButton
    text="Save"
    style={styles.button}
    onPress={() => {
        this.props.navigation.getParam("onEdit")(this.props.navigation.state.params);
        this.props.navigation.goBack();
    }}
/>
  

и:

 this.props.navigation.navigate("Edit", {
                    key: item.key,
                    image: item.image,
                    title: item.title,
                    des: item.des,
                    onEdit: this.onEdit,
                  })