React useEffect内调用setStockData后状态数据未填充问题求助

你的Promise用法、代码逻辑、依赖版本均无错误，出现该现象是React状态更新的固有机制导致的：

• useState返回的状态更新函数setStockData是异步执行的，调用后不会立刻修改当前作用域下的stockData变量。当前useEffect回调中捕获的stockData始终是本次组件渲染周期的初始值（空数组），所以调用setStockData后立刻打印拿到的还是旧值，并不是状态更新未生效。
• 状态更新完成后会触发组件重新渲染，下次渲染时拿到的stockData才是更新后的值。

要确认状态是否更新成功，可以新增一个useEffect监听stockData的变化，变化时打印即可拿到最新值：

useEffect(() => {
  console.log('stockData更新成功：', stockData)
}, [stockData])

你当前通过临时变量tempStocksData逐个push结果的写法可以运行，但更稳妥的写法是让每个请求的Promise直接返回处理后的对象，由Promise.all统一收集所有结果，避免异步操作修改外部临时变量的潜在问题，优化后的完整代码如下：

const [ stockData, setStockData ] = useState([])

const getStocksData = (stock) => {
    return axios.get(`${BASE_URL}?symbol=${stock}&token=${TOKEN}`)
      .then(res => ({
        name: stock,
        ...res.data
      }))
      .catch((error) => {
        console.error("Error", error.message)
        // 单个请求失败时可以选择返回占位对象，避免Promise.all整体失败
        return { name: stock, data: null }
      })
}

useEffect(()=> {
    const stocksList = ["AAPL", "MSFT", "TSLA", "FB", "BABA", "UBER", "DIS", "SBUX"];
    const promises = stocksList.map(stock => getStocksData(stock))
    Promise.all(promises).then((resultList)=>{
        console.log('所有请求返回结果：', resultList)
        setStockData(resultList)
    })   
}, []) 

// 监听stockData变化验证更新结果
useEffect(() => {
  console.log('最终stockData：', stockData)
}, [stockData])

内容的提问来源于stack exchange，提问作者Sam Ballinger