如何使用 fetch function 将来自 Api 的响应分配给数组

Question

我想在 Fruits 数组中分配响应我使用 fetch 从 Api 获取数据...但是当 console.log 时我得到空数组。这样： .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.com/audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => Fruits);    

 
     }, []);

Answer 1

使用 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.com/audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => setFruits(data);    
     }, []);

Answer 2

也许使用 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.com/audis/el/lt', requestOptions)
          .then(response => response.json())
          .then(data => setFruits(data));    

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

Answer 3

您没有将data分配给任何东西。 尝试：

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

此外，您应该使用 state 来存储信息。

const [fruits, setFruits] = useState();

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