मैं ReactJS के लिए नौसिखिया हूँ, मैं एक फ़ंक्शन घटक के भीतर API कॉल करना चाहता था। मैं एपीआई कॉल से ली गई सूची के साथ TreeBeard घटक भरना चाहता था।

मैं अपने कंसोल पर डेटा अपडेट करते हुए देख सकता हूं, लेकिन किसी कारण से ट्रीबीर्ड का डेटा नहीं है।

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

export default function Users() {

const [userAccounts, setUserAccounts] = useState([]);
useEffect(() => {
    fetch(
      `https://cors-anywhere.herokuapp.com/https://xxxx.azurewebsites.net/api/accounts`,
      {
        method: "GET",
        headers:{
        "Content-Type": "application/json",
        "x-Requested-With": "XMLHttpRequest"
        }
      }
    )
      .then(res => res.json())
      .then(response => {
        setUserAccounts(response);
        console.log("Accounts")
        console.log(response)
      })
      .catch(error => console.log(error));
  },[UserAccounts]);


  const data = {
    name: 'Accounts',
    toggled: true,
    children: userAccounts
  };
  const [data, setData] = useState(data);

  const onToggle = (node, toggled) => {
    if (cursor) {
        cursor.active = false;
    }
    node.active = true;
    if (node.children) {
        node.toggled = toggled;
    }
    setCursor(node);
    setData(Object.assign({}, data))
    console.log("Toggled")

return (
          <GridItem xs={4} sm={12} md={7}>
           <Treebeard data={data} onToggle={onToggle}/>
          </GridItem>
         
);
}

मुझे लगता है कि const data- children पैरामीटर वह जगह है जहां मुझे ट्रीबियर नमूनों के अनुसार ली गई सूची को असाइन करना चाहिए, लेकिन जब मैं इसे करता हूं, तब भी यह लॉग पर खाली दिखता है userAccounts में शामिल हैं अभिलेखों की एक श्रृंखला। क्या कोई ऐसा कदम है जिसे मैं उठाना भूल गया हूँ? या क्या मैंने हैंडलिंग को गड़बड़ कर दिया? स्क्रीनशॉट

0
SHSHG 15 अक्टूबर 2020, 00:23

1 उत्तर

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

मुद्दा लगता है।

जब कोड इस सेक्शन में पहुंच जाता है।

const data = {
    name: 'Accounts',
    toggled: true,
    children: userAccounts // <---- this is [], data has not loaded yet.
  };

Data.child है []।

userAccounts डेटा प्राप्त होने के बाद अपडेट हो जाता है। लेकिन data.children बाद में कुछ भी अपडेट नहीं होता है।

डेटा को अपडेट होते देखने के लिए आप .then(response => { कोड सेक्शन में स्निप किए गए इस कोड का उपयोग करने का प्रयास कर सकते हैं।

setData( {
  name: 'Accounts',
  toggled: true,
  children: response
})

इरादा के अनुसार काम करने के लिए कुछ और कोड फेरबदल की आवश्यकता हो सकती है। लेकिन आशा है कि यह आपको लोड किए गए डेटा का उपयोग करने के साथ शुरू कर देगा।

0
Kunukn 15 अक्टूबर 2020, 00:46