javascript - 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>
            </>

标签： javascriptreactjsreact-native

Answer 1

我建议您将数据保持在组件状态：

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