मैं अपने डेटाबेस से मान प्राप्त करने, डालने और हटाने के लिए Axios का उपयोग कर रहा हूं और उन्हें एक तालिका में प्रदर्शित किया है; हालांकि, मुझे अपने परिवर्तन देखने के लिए पृष्ठ को रीफ्रेश करने की आवश्यकता है। उत्तर खोजने के लिए, मैंने इन पोस्टों को देखा है: कैसे Axios सफल कॉल के बाद पेज को अपडेट करने के लिए? प्रतिक्रिया, प्रतिक्रिया में कार्रवाई के बाद तालिका को ताज़ा करें, और जब कोई पंक्ति हटाई या जोड़ी जाती है तो मैं तालिका को ताज़ा करने के लिए रिएक्ट हुक का उपयोग कैसे कर सकता हूँ? दुर्भाग्य से, मैं अभी भी अटका हुआ हूं और अनिश्चित हूं कि प्रतिक्रिया अपडेट पर तालिका पंक्तियों को गतिशील रूप से कैसे अपडेट किया जाए।

अपडेट: मैंने देखा है कि getValues फ़ंक्शन पोस्ट से पहले चलता है और विधियों को हटाता है, यही कारण है कि यह वर्तमान में विधियों के निष्पादन से पहले पिछले मान दिखा रहा है।

Axios.js - जहां मैं प्राप्त करें और हटाएं विधियों का उपयोग कर रहा हूं। वे काम करते हैं क्योंकि मेरे पास कंसोल पर मुद्रित प्रतिक्रियाएं हैं।

import axios from "axios";

const getValues = async () => {
  const values = await axios
    .get("https://pokeapi.co/api/v2/type/")
    .then((response) => {
      return response.data;
    })
    .catch(function (error) {
      console.log(error);
    });
  return values;
};


const postValues = (values) => {
  axios
    .post("https://pokeapi.co/api/v2/type/")
    .then((response) => {
      console.log("Post Values: ", response.data);
      return response.data;
    });
};

const deleteValues = (id) => {
  console.log(id);
  const deleteValues = axios
    .delete(`https://pokeapi.co/api/v2/type/${id}`)
    .then((response) => {
      console.log("Delete Values: ", response);
    })
    .catch(function (error) {
      console.log(error);
    });
  return deleteValues;
};

export { getValues, postValues, deleteValues }

ValuesTable.js - जहां हटाएं विधि निष्पादित होती है

  import Axios from "./Axios";

  const [data, setData] = React.useState();

  useEffect(() => {
    Axios.getValues().then((result) => {
      setData(result.data);
    });
  }, [data]);

  return (
  {data.map((values) => {
    <TableRow/>
    <TableCell>{values.values}</TableCell>
    <TableCell>
      <Button
        onClick={() =>
           Axios.deleteValues(values.id);
        }
      />
    })};  
  )

Form.js - जहां पोस्ट विधि निष्पादित होती है

if (values.id === 0) {
  Axios.postValues(values);
} else {
  Axios.putValues(values, values.id);
}

UseState setData(result.data) डेटाबेस में सभी मौजूदा मानों को लोड करता है। विधि deleteValues एक सरणी में एक मान हटाता है। विधि postValues डेटाबेस में एक मान जोड़ता है।

1
May 10 जुलाई 2021, 05:03

3 जवाब

मुझे लगता है कि आप यहाँ गलत हैं:

useEffect(() => {
    Axios.getValues().then((result) => {
      setData(result.data); // result has no data property
    });
  }, [data]);

कृपया इसे बदलने का प्रयास करें

useEffect(() => {
    Axios.getValues().then((result) => {
      console.log("RESULT",result); // check the actually response from API
      setData(result.results); // the response of data is called results
    });
  }, [data]);
0
edhi.uchiha 10 जुलाई 2021, 03:47
import axios from "axios";  const getValues = async () => {  const values = await axios .get("https://pokeapi.co/api/v2/type/")

.then ((प्रतिक्रिया) => {वापसी प्रतिक्रिया। डेटा;}) .catch (फ़ंक्शन (त्रुटि) {कंसोल.लॉग (त्रुटि);}); वापसी मूल्य; };

मुझे नहीं पता क्यों लेकिन आप इसके साथ क्या हासिल करने की कोशिश कर रहे हैं। आपको या तो async/प्रतीक्षा खंड या फिर खंड का उपयोग करना चाहिए लेकिन आप दोनों का उपयोग कर रहे हैं, कम से कम पहले कोडिंग का कुछ अच्छा अभ्यास करें। दूसरा, मुझे लगता है कि आपको अपने कोड को और अधिक समझने योग्य बनाने के लिए कोशिश करने के अंदर async प्रतीक्षा का उपयोग करना चाहिए और फिर/पकड़ वाक्यांशों को हटा देना चाहिए, फिर यदि आप अपना परिणाम मूल्यों के अंदर संग्रहीत करते हैं तो बस values.data लौटाएं और आपकी समस्या हल हो सकती है।

0
Piyush Rana 10 जुलाई 2021, 06:17

चूंकि deleteValues फ़ंक्शन सर्वर-साइड पर सरणी से एक विशिष्ट ऑब्जेक्ट को हटा देता है, इसलिए मैंने सामने के छोर पर प्रतिबिंबित करने के लिए मिलान आईडी को हटाने के लिए सरणी में ऑब्जेक्ट्स की सूची filter तय की है। . https://developer.mozilla.org/ en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

इस तरह मैं इसके पास पहुंचा।

{data.map((values) => {
  ...
    <Button
      onClick={() => {

        setData(data.filter((item) => item.id !== values.id)); // <- Filter

        Axios.deleteValues(values.id)
          .then(data => setData(data));
      }}
    />
  ...
})};
0
May 10 जुलाई 2021, 14:18