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

【问题标题】：How to assign response from Api to an array using fetch function如何使用 fetch 函数将来自 Api 的响应分配给数组
【发布时间】：2022-08-19 10:29:53
【问题描述】：

我想在 Fruits 数组中分配响应我使用 fetch 从 Api 获取数据...但是当 console.log 时我得到空数组..我从 Api 获得响应但无法将其分配给水果我正在这样做：.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);    

 
     }, []);

您最有可能想要创建Fruits 状态：const [fruits, setFruits] = useState([]);，然后设置您的状态：.then(data => setFruits(data));。当您使用状态时，您的组件将重新渲染（因此您可以让您的组件使用水果来显示内容）

标签： javascript arrays reactjs api react-hooks

【解决方案1】：

也许使用状态？

    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);

【讨论】：

英雄所见略同：）

【解决方案2】：

使用状态

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);    
     }, []);

【讨论】：

很好看哈哈。。

【解决方案3】：

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

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

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

const [fruits, setFruits] = useState();

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

【讨论】：

【解决方案4】：

const [水果，setFruits] = useState([]) 使用效果（（）=> {

  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);

【讨论】：