为什么状态不在React中进行更新？

Question

我在React中有一个Alice-Carousel，我可以从API中获取项目。从API获取数据后，我正在更新旋转木马的项目阵列，但正在获取项目的价值，如未定义。加密固定是防止支撑的背景。

import React from 'react'
import { useEffect ,useState} from 'react';
import { CryptoState } from '../CryptoContext'
import { TrendingCoins } from '../api';
import axios from 'axios'
import AliceCarousel from 'react-alice-carousel';
import {Link} from 'react-router-dom'

const Carousel = () => {
    const [trending,setTrending] = useState([]);
    const {currency,setCurrency} = CryptoState();
  
    useEffect(() => {
      const {data}= axios.get(TrendingCoins(currency));
      setTrending(data);
    },[currency,trending])
    
    // 0 pe 2 items dikhane hai, 512 size pe 4 items dikhane hai,
    // thats all about responsiveness.

    const responsives = {               
      0: {
        items: 2
      },
      512: {
        items: 4
      }
    }

    const items= trending.map((coin) => {
      return (
        <>
          <Link to={`/coins/${coin.id}`}/>
          <img 
             className="carouselImages"
             src={coin?.image}
             height="80"
             style={{marginBottom:10}}
          />
        </>
      )
    })

    return (
      <AliceCarousel
       infinite
       mouseTracking
       autoPlayInterval={1000}
       animationDuration={1500}
       disableDotsControls
       responsive={responsives}                     
       autoPlay
       items={items}
      />
    )
}

export default Carousel

Answer 1

useEffect(()=>{
const getData = async () => {
    try{
        const {data} = await axios.get(TrendingCoins(currency));
        setTrending(data);
    }catch{}
}
getData()
}, [currency, trending])

您没有等待响应，也可以在使用效率箭头函数

编辑中写async。 ： https://devtrium.com/posts/posts/ashync-functs-functions-useeeeefect-yeefect-functions-useeeefect

Answer 2

      const {data}= axios.get(TrendingCoins(currency));

问题是Axios。Get是一个异步调用，因此基本上您不在等待结果，您可以异步/等待或承诺

    useEffect(async ()=>{
      const response = await axios.get(TrendingCoins(currency));
      setTrending(response.data);
    },[currency,trending])

Answer 3

Axios是异步的，这意味着该应用需要等待数据传递。这样做的方法之一是使用Thenables。

useFect（）依赖esecies存在一些问题。如果您将趋势作为依赖关系，则会有一个无限循环，可能会使浏览器崩溃。这是因为usestate挂钩重新呈现组件并更改状态和useffect当依赖关系值更改时触发。

在返回中，您还需要进行更改。如果该应用没有可用数据，则无法显示。为了解决这个问题，我们需要使用条件语句。

看看

import React from 'react'
import { useEffect ,useState} from 'react';
import { CryptoState } from '../CryptoContext'
import { TrendingCoins } from '../api';
import axios from 'axios'
import AliceCarousel from 'react-alice-carousel';
import {Link} from 'react-router-dom'

const Carousel = () => {
    const [trending,setTrending]=useState([]);
    const {currency,setCurrency}=CryptoState();
  
    useEffect(()=>{
      axios.get(TrendingCoins(currency))
      .then((data) => {
          setTrending(data)
      })
      .catch((error) => {
          console.log(error)
      })
     
    },[currency])

    const responsives={         //0 pe 2 items dikhane hai, 512 size pe 4 items dikhane hai,thats all about responsiveness.
      0:{
        items:2,
      },
      512:{
        items:4,
      }
    }

    const items = trending.map((coin)=>{
      return (
        <>
        <Link to={`/coins/${coin.id}`}/>
        <img className="carouselImages"
        src={coin?.image}
        height="80"
        style={{marginBottom:10}}
        />
        </>
      )
    })

  if(trending === undefined) return (<p>Loading data....</p>)
  else return (
    <AliceCarousel
    infinite
    mouseTracking
    autoPlayInterval={1000}
    animationDuration={1500}
    disableDotsControls
    responsive={responsives}                 //responsive is to generate responsiveness....
    autoPlay
    items={items}
    />
  )
}

export default Carousel