प्रतिक्रियाशील मूल - राज्य बच्चे में बदल गया, माता-पिता को कैसे अपडेट किया जाए?

Question

वर्तमान में मैं अपने बच्चे के घटक में राज्य बदल रहा हूं और अब मैं अपने माता-पिता को अपडेट करना चाहता हूं। प्रारंभ में, मैं माता-पिता से बच्चे को डेटा दे रहा हूं और फिर बच्चे में मैं राज्य बदल रहा हूं। जब मैं ऐसा करता हूं तो एप्लिकेशन में कुछ भी नहीं होता है क्योंकि अभिभावक अभी भी अपडेट नहीं किया जाता है, लेकिन जब मैं ऐप को फिर से लोड करता हूं, तो जो बदलाव किए गए थे वे अपडेट किए गए हैं।

मैं अपने पैरेंट स्क्रीन से चाइल्ड स्क्रीन पर जाने के लिए रिएक्शन नेविगेशन का भी उपयोग कर रहा हूं।

यहाँ मेरा कोड है:

मूल स्क्रीन:

function PostsScreen({navigation}) {

const [posts, setPosts] = useState([]);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);

const loadPosts = async () => {
setLoading(true);
const response = await postsApi.getPosts();
setLoading(false);

if (!response.ok) return setError(true);

setError(false);
setPosts(response.data);
};

useEffect(() => {
loadPosts();
}, []);

return(
<ActivityIndicator visible={loading} />
<FlatList
      data={posts}
      keyExtractor={(post) => post.id.toString()}
      renderItem={({ item }) => (
        <Card
          title={item.title}
          subTitle={item.subTitle}
          onPress={() => 
          navigation.navigate(routes.POST_DETAILS,item)}
        />
      )}
    />
  );
  }

बाल स्क्रीन:

function PostDetailsScreen({ route }) {
const post = route.params;
const { user} = useAuth();

const [addedToLikes, setAddedToLikes] = useState(post.isLiked);
const[likesCount,setLikesCount]=useState(post.likesCount)

const addToLikes = (PostId,userId) => {
postsApi.likePost({PostId,userId});
setAddedToLikes(!addedToLikes);
};

let show_likes="";
if(addedToLikes){
show_likes=(likesCount >1)?(("Liked by you")+" and "+(likesCount - 1)+((likesCount ==2)?( " 
other"):(" others"))):("Liked by you");
}else if(likesCount >0){
show_likes=(likesCount ==1)?(likesCount+ " like"):(likesCount + " likes");
}

return(
<TouchableOpacity onPress={() => {addToLikes(post.id,user.id)}}>
              {addedToLikes?<MaterialCommunityIcons
              name="heart"
            />:<MaterialCommunityIcons
                name="heart-outline"
              />}
</TouchableOpacity>

<View><TextInput>{show_likes}</TextInput></View>

)}

अगर कोई पोस्ट लाइक की जाती है और पैरेंट घटक में लाइक करें तो मैं कैसे अपडेट करूं?

इसके अलावा, मैं Redux का उपयोग नहीं कर रहा हूं।

अपडेट :

मैंने निम्नलिखित करने की कोशिश की, लेकिन मुझे अभी भी एक त्रुटि मिल रही है।

मूल स्क्रीन:

function PostsScreen({ navigation }) {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const loadPosts = async () => {
    setLoading(true);
    const response = await postsApi.getPosts();
    setLoading(false);

    if (!response.ok) return setError(true);

    setError(false);
    setPosts(response.data);
  };

  useEffect(() => {
    loadPosts();
  }, []);

  const [addedToLikes, setAddedToLikes] = useState(post.isLiked);

  const addToLikes = (PostId, userId) => {
    postsApi.likePost({ PostId, userId });
    setAddedToLikes(!addedToLikes);
  };

  const { user } = useAuth();

  return (
    <React.Fragment>
      <ActivityIndicator visible={loading} />
      <FlatList
        data={posts}
        keyExtractor={post => post.id.toString()}
        renderItem={({ item }) => (
          <Card
            title={item.title}
            subTitle={item.subTitle}
            onPress={() => navigation.navigate(routes.POST_DETAILS, item)}
          />
        )}
      />
      <PostDetailsScreen addToLikes={addToLikes(posts.id, user.id)} />
    </React.Fragment>
  );
}

बाल स्क्रीन:

function PostDetailsScreen({ route, addedToLikes, addToLikes }) {
  const post = route.params;

  const [likesCount, setLikesCount] = useState(post.likesCount);

  let show_likes = "";
  if (addedToLikes) {
    show_likes =
      likesCount > 1
        ? "Liked by you" + " and " + (likesCount - 1) + (likesCount == 2 ? " other" : " others")
        : "Liked by you";
  } else if (likesCount > 0) {
    show_likes = likesCount == 1 ? likesCount + " like" : likesCount + " likes";
  }

  return (
    <React.Fragment>
      <TouchableOpacity
        onPress={() => {
          addToLikes;
        }}
      >
        {addedToLikes ? <MaterialCommunityIcons name="heart" /> : <MaterialCommunityIcons name="heart-outline" />}
      </TouchableOpacity>

      <View>
        <TextInput>{show_likes}</TextInput>
      </View>
    </React.Fragment>
  );
}

Answer 1

साझा किए गए राज्य के कुछ रूप का उपयोग किए बिना जैसे कि आपके घटक संरचना पर निर्णय लेने के लिए आपके द्वारा किए गए परिणाम को प्राप्त करने का सबसे अच्छा तरीका है Redux।

ऐसा लगता है कि आपके पास इस तरह की संरचना है:

जनक (के बारे में नहीं जानता likes) -> बच्चा (के बारे में जानता है likes)

लेकिन आप कुछ इस तरह चाहते हैं:

जनक (के बारे में जानता है likes) -> बच्चे (साथ बातचीत likes)

इसलिए मैं अपने होने की सलाह देते हैं stateकी जनक घटक रखें ट्रैक में isLikedऔर likesCount। माता-पिता भी बच्चे के घटक के लिए एक विधि हैंडलर पास करेंगे जैसे कि addToLikes(post.id,user.id)।

उदाहरण कोड:

import React from 'react';

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: null
        }
    }

    handleCallback = (childData) =>{
        this.setState({data: childData})
    }

    render(){
        const {data} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {data}
            </div>
        )
    }
}

class Child extends React.Component{
  
    onTrigger = (event) => {
        this.props.parentCallback("Data from child");
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "submit" value = "Submit"/>
            </form>
        </div>
        )
    }
}

export default Parent;