React Native，值沒有更新

Question

我制作了一個編輯屏幕，並嘗試使用 getParams 和設置 setParams 通過導航 v4 更新帖子的值，但是當我更改舊值並單擊保存按鈕保存它時，它沒有更新它，也沒有顯示任何錯誤。 它仍然顯示舊值。 有人可以幫我嗎，下面是我的代碼

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>

首頁.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>
            </>

Answer 1

我建議您將數據保留在組件 state 中：

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();
      }}
    />

Answer 2

也許試試這個：

<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,
                  })