Question

im调用执行fetch的api，但使用setHotSalesArray时，在useEffect完成后hotSalesArray为空

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

这是我遇到问题的部分

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

Answer 1

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

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

1 个答案: