javascript - How to assign response from Api to an array using fetch function - Stack Overflow

admin管理员组

文章数量:1317572

I want to assign response in Fruits array ones I fetched the data from Api using fetch...But I am getting empty array when console.log.. I am getting the response from Api but not able to assign it to fruits I am doing this way: .then(data => Fruits);

let Fruits = []



     useEffect(() => {
      
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIwicm9sZSI6ImV4cGVydCJ9.6pYrAr_En0nl4N52oP1O7WRJA6PPFGCzUebauBIOEnc", },
          body: JSON.stringify({"dfdfdffd"})
      };
     
          fetch('', requestOptions)
          .then(response => response.json())
          .then(data => Fruits);    

 
     }, []);

I want to assign response in Fruits array ones I fetched the data from Api using fetch...But I am getting empty array when console.log.. I am getting the response from Api but not able to assign it to fruits I am doing this way: .then(data => Fruits);

let Fruits = []



     useEffect(() => {
      
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIwicm9sZSI6ImV4cGVydCJ9.6pYrAr_En0nl4N52oP1O7WRJA6PPFGCzUebauBIOEnc", },
          body: JSON.stringify({"dfdfdffd"})
      };
     
          fetch('https://d./audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => Fruits);    

 
     }, []);

• javascript
• arrays
• reactjs
• api
• react-hooks

Share Improve this question Follow edited Mar 18, 2022 at 9:22 James_sheford asked Mar 17, 2022 at 12:15 James_shefordJames_sheford 30311 gold badge33 silver badges1515 bronze badges 1

• 2 You most likely want to make Fruits state: const [fruits, setFruits] = useState([]);, and then set your state: .then(data => setFruits(data));. When you use state, your ponent will rerender (so then you can make your ponent use fruits to display content) – Nick Parsons Commented Mar 17, 2022 at 12:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Use a state

const [fruits, setFruits] = useState([]);
useEffect(() => {
      
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIwicm9sZSI6ImV4cGVydCJ9.6pYrAr_En0nl4N52oP1O7WRJA6PPFGCzUebauBIOEnc", },
          body: JSON.stringify({"firebase_id":"foCzPM8MgOtg1"})
      };
     
          fetch('https://d./audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => setFruits(data);    
     }, []);

You're not assigning data to anything. Try:

fetch('https://d./audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => Fruits = data);   

Also, you should use a state do store the information.

const [fruits, setFruits] = useState();

fetch('https://d./audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => setFruits(data));   

Maybe use a state?

    const [fruits, setFruits] = useState([])
    useEffect(() => {
      
      const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIwicm9sZSI6ImV4cGVydCJ9.6pYrAr_En0nl4N52oP1O7WRJA6PPFGCzUebauBIOEnc", },
          body: JSON.stringify({"firebase_id":"foCzPM8MgOtg1"})
      };
     
          fetch('https://d./audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => setFruits(data));    

       
  
 
     }, []);
     console.log(fruits);

本文标签： javascriptHow to assign response from Api to an array using fetch functionStack Overflow