Bereaksi asli, edit data dari layar lain

Question

Saya membuat 2 layar satu layar beranda dan layar edit kedua. Saya perlu mengedit data layar beranda dari layar edit dan menyimpannya dan data itu juga harus diperbarui di layar beranda dan detail. Bagaimana saya bisa melakukan ini tanpa redux atau konteks. Adakah yang bisa memberitahuku.

Home.js

class Home extends Component {
  state = {
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
    ],
  };

  render() {
    return (
        <FlatList
          data={this.state.post}
          renderItem={({ item }) => (
            <>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => this.props.navigation.navigate("Edit", item)}
                style={styles.Edit}
              >
                <MaterialCommunityIcons
                  name="playlist-edit"
                  color="green"
                  size={35}
                />
              </TouchableOpacity>
              <Card
                title={item.title}
                subTitle={item.des}
                image={item.image}
                onPress={() => this.props.navigation.navigate("Details", item)}
              />
            </>
          )}
        />

Edit.js

class ListDetails extends Component {
  render() {
    const listing = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <AppTextInput value={listing.title} />
          <AppTextInput value={listing.des} />
        </View>
        <AppButton
          text="Save"
          onPress={() => this.props.navigation.goBack("Home")}
        />
      </View>

Details.js

 const listing = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <Text style={styles.title}>{listing.title}</Text>
          <Text style={styles.des}>{listing.des}</Text>
        </View>
      </View>
    );

Answer 1

Anda dapat meneruskan fungsi dari layar beranda Anda ke setState untuk itu di layar edit Anda. Jika menavigasi ke layar edit menyebabkan layar beranda dilepas, Anda dapat mengubah metode navigasi untuk mendorong navigator tumpukan (saya belum menguji). Kode sekarang akan terlihat seperti:

HomeScreen.js:

onEdit=(data)=>{
  setState(...);
}
...
<TouchableOpacity
  activeOpacity={0.7}
  onPress={() => this.props.navigation.navigate("Edit", {item, onEdit})} //use push instead if error occured
  style={styles.Edit}
>
...

Edit.js

class ListDetails extends Component {
  render() {
    const {item:listing, onEdit} = this.props.route.params;
    return (
      <View>
        <Image style={styles.image} source={listing.image} />
        <View style={styles.detailContainer}>
          <AppTextInput value={listing.title} />
          <AppTextInput value={listing.des} />
        </View>
        <AppButton
          text="Save"
          onPress={() => { onEdit(...); this.props.navigation.goBack("Home");}}
        />
      </View>