为什么 useEffect 在 api 调用后不更新值？

Question

我正在调用执行提取的 api，但是在使用 setHotSalesArray 时，hotSalesArray 在 useEffect 完成后为空

我试过调用另一个发送数据的函数，也试过将数据放入变量中以尝试以这种方式更新它

这是我遇到问题的部分

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

更新：

所以我知道我需要重新渲染才能在变量中包含我的新值，我的问题是我的 return


         <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

Answer 1

当您执行 console.log(hotSalesArray, info, infoData) 时，hotSalesArray 将具有当前渲染的值，即 {}（初始值）。直到 re-render 发生 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>
    )   
}

为什么 useEffect 在 api 调用后不更新值？

why is useEffect not updating the value after the api call?

fetch

reactjs

react-hooks