मेरे Main.js में मैं एक उपयोगकर्ता नाम और उन उपयोगकर्ताओं की सूची के साथ पहला वैश्विक राज्य बनाता हूं जिनका मैं अनुसरण कर रहा हूं।

फिर, वॉल कंपोनेंट और फॉलोसाइडबार दोनों ही अनुसरण और उनके संदेशों की सूची (साथ ही मुख्य उपयोगकर्ता के संदेश) प्रस्तुत करते हैं।

अब तक सब ठीक है। लेकिन फॉलोसाइडबार के अंदर एक नेस्टेड घटक में जिसे फॉलोयूसर कहा जाता है, मेरे पास एक उपयोगकर्ता को हटाने के लिए एक ऑनक्लिक है। मेरी समझ यह है कि, क्योंकि मैं राज्य बदलता हूं, उपयोग प्रभाव इसे फिर से प्रस्तुत करने के लिए दीवार घटक का ख्याल रखेगा, लेकिन कुछ भी नहीं होता है ... मैंने ऑनलाइन कई उदाहरणों की जांच की है लेकिन अब तक मेरे उपयोग के मामले में कुछ भी मदद नहीं मिली है।

कहने की जरूरत नहीं है कि मैं रिएक्ट के साथ अत्यधिक अनुभवी नहीं हूं और हुक थोड़े जटिल हैं।

यहां कोड:

मुख्य जेएस:

import React, { useEffect, useState } from "react";
import ReactDom from "react-dom";
import db from "./firebase.js";

// Components
import Header from "./components/Header";
import FollowingSidebar from "./components/FollowingSidebar";
import SearchUsers from "./components/SearchUsers";
import NewMessageTextarea from "./components/NewMessageTextarea";
import Wall from "./components/Wall";

// Context
import StateContext from "./StateContext";

function Main() {
  const [mainUser] = useState("uid_MainUser");
  const [follows, setFollows] = useState([]);

  const setInitialFollows = async () => {
    let tempFollows = [mainUser];
    const user = await db.collection("users").doc(mainUser).get();
    user.data().following.forEach(follow => {
      tempFollows.push(follow);
    });
    setFollows(tempFollows);
  };

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

  const globalValues = {
    mainUserId: mainUser,
    followingUsers: follows
  };

  return (
    <StateContext.Provider value={globalValues}>
      <Header />
      <FollowingSidebar />
      <SearchUsers />
      <NewMessageTextarea />
      <Wall />
    </StateContext.Provider>
  );
}

ReactDom.render(<Main />, document.getElementById("app"));

if (module.hot) {
  module.hot.accept();
}

निम्नलिखित साइडबार घटक:

import React, { useState, useEffect, useContext } from "react";
import db from "../firebase.js";
import StateContext from "../StateContext";
import FollowingUser from "./FollowingUser";

export default function FollowingSidebar() {
  const { followingUsers } = useContext(StateContext);
  const [users, setUsers] = useState(followingUsers);

  useEffect(() => {
    const readyToRender = Object.values(followingUsers).length > 0;
    if (readyToRender) {
      db.collection("users")
        .where("uid", "in", followingUsers)
        .get()
        .then(users => {
          setUsers(users.docs.map(user => user.data()));
        });
    }
  }, [followingUsers]);

  return (
    <section id="following">
      <div className="window">
        <h1 className="window__title">People you follow</h1>
        <div className="window__content">
          {users.map((user, index) => (
            <FollowingUser avatar={user.avatar} username={user.username} uid={user.uid} key={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

निम्नलिखित उपयोगकर्ता घटक:

import React, { useState, useContext } from "react";
import db from "../firebase.js";
import firebase from "firebase";
import StateContext from "../StateContext";

export default function FollowingUser({ avatar, username, uid }) {
  const { mainUserId, followingUsers } = useContext(StateContext);
  const [follows, setFollows] = useState(followingUsers);

  const removeFollow = e => {
    const userElement = e.parentElement;
    const userToUnfollow = userElement.getAttribute("data-uid");

    db.collection("users")
      .doc(mainUserId)
      .update({
        following: firebase.firestore.FieldValue.arrayRemove(userToUnfollow)
      })
      .then(() => {
        const newFollows = follows.filter(follow => follow !== userToUnfollow);
        setFollows(newFollows);
      });
    userElement.remove();
  };

  return (
    <article data-uid={uid} className="following-user">
      <figure className="following-user__avatar">
        <img src={avatar} alt="Profile picture" />
      </figure>
      <h2 className="following-user__username">{username}</h2>
      <button>View messages</button>
      {uid == mainUserId ? "" : <button onClick={e => removeFollow(e.target)}>Unfollow</button>}
    </article>
  );
}

दीवार घटक:

import React, { useState, useEffect, useContext } from "react";
import db from "../firebase.js";
import Post from "./Post";
import StateContext from "../StateContext";

export default function Wall() {
  const { followingUsers } = useContext(StateContext);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    console.log(followingUsers);
    const readyToRender = Object.values(followingUsers).length > 0;
    if (readyToRender) {
      db.collection("posts")
        .where("user_id", "in", followingUsers)
        .orderBy("timestamp", "desc")
        .get()
        .then(posts => setPosts(posts.docs.map(post => post.data())));
    }
  }, [followingUsers]);

  return (
    <section id="wall">
      <div className="window">
        <h1 className="window__title">Latest messages</h1>
        <div className="window__content">
          {posts.map((post, index) => (
            <Post avatar={post.user_avatar} username={post.username} uid={post.user_id} body={post.body} timestamp={post.timestamp.toDate().toDateString()} key={index} />
          ))}
        </div>
      </div>
    </section>
  );
}

StateContext.js:

import { createContext } from "react";

const StateContext = createContext();

export default StateContext;

1
user3219369 9 जिंदा 2021, 21:31
आपने StateContext को कैसे कार्यान्वित किया है?
 – 
Imran Rafiq Rather
9 जिंदा 2021, 21:42
मैंने इसे मुख्य संदेश के अंत में जोड़ा है।
 – 
user3219369
9 जिंदा 2021, 21:47
हम्म। हाँ, मैंने जाँच की..मुझे फिर से कोड की जाँच करने दें :) मुझे आशा है कि सभी डेटा फायरस्टोर से सही तरीके से आ रहे हैं...
 – 
Imran Rafiq Rather
9 जिंदा 2021, 22:38
हाँ यही है। अब मैं जो देख रहा हूं वह यह है कि फॉलोयूसर में सेटफॉलो वास्तव में किसी कारण से राज्य को अपडेट नहीं कर रहा है।
 – 
user3219369
9 जिंदा 2021, 22:53
मैंने एक समान डेमो बनाया है :) बस मुझे यह देखने के लिए एक क्षण दें कि मेट क्या हो रहा है :)
 – 
Imran Rafiq Rather
9 जिंदा 2021, 22:54

1 उत्तर

सबसे बढ़िया उत्तर

मुख्य समस्या state चर की Main.js फ़ाइल में सेटिंग है (यह डेटा वास्तव में विश्व स्तर पर स्थिति को संभालने के लिए Context का हिस्सा होना चाहिए)।

नीचे दिया गया कोड विश्व स्तर पर हमारे राज्य को अपडेट नहीं करेगा।

   const globalValues = {
     mainUserId: mainUser,
     followingUsers: follows
   };

हमें राज्य को इस तरह लिखना होगा कि वह वैश्विक संदर्भ स्तर पर संशोधित हो जाए। तो अपने Main.js में नीचे की तरह स्थिति सेट करें:

  const [globalValues, setGlobalValues] = useState({
    mainUserId: "uid_MainUser",
    followingUsers: []
  });

साथ ही अपने सभी event handlers को Context Level में Main.js में केवल prop-drilling से बचने और बेहतर काम करने के लिए जोड़ें।

CODESAND BOX DEMO: https://codesandbox.io/s/context -एपीआई-एंड-रेंडरिंग-इश्यू-यूडुक

कोड स्निपेट डेमो:

import React, { useEffect, useState } from "react";
import FollowingSidebar from "./FollowingSidebar";

import StateContext from "./StateContext";
const url = "https://jsonplaceholder.typicode.com/users";

function App() {
  const [globalValues, setGlobalValues] = useState({
    mainUserId: "uid_MainUser",
    followingUsers: []
  });

  const getUsers = async (url) => {
    const response = await fetch(url);
    const data = await response.json();

    setGlobalValues({
      ...globalValues,
      followingUsers: data
    });
  };

  // Acts similar to componentDidMount now :) Called only initially
  useEffect(() => {
    getUsers();
  }, []);

  const handleClick = (id) => {
    console.log(id);
    const updatedFollowingUsers = globalValues.followingUsers.filter(
      (user) => user.id !== id
    );
    setGlobalValues({
      ...globalValues,
      followingUsers: updatedFollowingUsers
    });
  };

  return (
    <StateContext.Provider value={{ globalValues, handleClick }}>
      <FollowingSidebar />
    </StateContext.Provider>
  );
}

export default App;
0
Imran Rafiq Rather 10 जिंदा 2021, 01:10