почему useEffect не обновляет значение после вызова API? - PullRequest
Новая
       42

почему useEffect не обновляет значение после вызова API?

0 голосов
/ 21 июня 2019

я вызываю API, который выполняет выборку, но при использовании setHotSalesArray hotSalesArray становится пустым после использованияEffect Finishes

Я пытался вызвать другую функцию, отправляющую данные, также пытался поместить данные в переменную, чтобы попытаться обновить ее таким образом

вот та часть, с которой у меня проблемы с 

const [isActive, setIsActive] = useState(true);
  const [hotSalesArray, setHotSales] = useState({});

  useEffect(()=>{
    let infoData;
    API.getToken().then(
      (data) =>API.getHotSale(data).then(info => (
        infoData = info,
        setHotSales(infoData),
        setIsActive(false),
        console.log(hotSalesArray,info, infoData)
        ),
      )
    )
  },[])

вот что я получаю на консоли: 

{} {hotsales: Array(1)} {hotsales: Array(1)}

и ожидаемый результат таков: 

{hotsales: Array(1)} {hotsales: Array(1)} {hotsales: Array(1)}

Обновление:

поэтому я узнал, что мне нужно выполнить повторный рендеринг, чтобы у меня было новое значение внутри переменной, моя проблема в том, что у меня это в моем возвращении 


         <div className="hotSalesContainer">
         <h1 className="activitiesLabelHot">
              Ventas Calientes
          </h1>
            {hotSales}
               { hotSales !== undefined ? hotSales.map((hotsale,index) => <PropertyElement data={hotsales}  key={index.toString()} /> ) : ""}
          </div>```

so i need the object hotSales to have something before i return that, i used to do this call before with componentWillMount, but im trying to learn how to use hooks

1 Ответ

0 голосов
/ 21 июня 2019

Когда вы делаете console.log(hotSalesArray, info, infoData), hotSalesArray будет иметь значение текущего рендера, которое равно {} (начальное значение).До повторного рендеринга не будет, пока hotSalesArray будет иметь значение { hotsales: [...] }, но вы не увидите этого в консоли, потому что вы регистрируетесь только тогда, когда ответ возвращается из вашего API.

Добавьте консольный журнал прямо в рендер, и вы увидите.

Я исправил синтаксические ошибки и сделал некоторую очистку.Помимо синтаксических ошибок, у вас была правильная идея.Возможно, это можно улучшить с помощью useReducer, но я не хотел бы слишком усложнять ответ:) 

const MyComponent = () => {
    const [isActive, setIsActive] = useState(true);
    const [hotSales, setHotSales] = useState({});

    useEffect(
      () => {
        API.getToken()
          .then(data => API.getHotSale(data))
          .then(info => {
            setHotSales(info);
            setIsActive(false);
          })
      },
      []
    );

    const { hotsales = [] } = hotSales;
    return ( 
        <div className='hotSalesContainer'> 
            <h1 className='activitiesLabelHot'>Ventas Calientes</h1> 

            { hotsales.length && 
                hotsales.map((sale, index) => 
                    <PropertyElement data={sale} key={index} /> 
                )
            } 
        </div>
    )   
}
...