我如何在实例化React组件时执行更新状态的异步函数？

Question

当前，我的App.tsx包含此位。

<Route path="/car/:carModel" component={displayCarInfo} />

// @ts-ignore
const displayCarInfo = ({ match  }) => (
    <div>
        <CarInfoPage carModel={match.params.carModel}/>
    </div>
)

稍后在我的CarInfoPage组件中，我有

let carModel  = props.carModel 
let [state, setState] = useState({carInfo : null, otherInfo: null})

async function getInfo(query : string) { 
    let carInfo = await GetCarInfo()   // make API call
    carInfo = processCarInfo()         // process data a little bit

    setState({                         // update state
            ...state,
            carInfo: carInfo
        })
}

如何在加载组件以使getInfo()不是state.carInfo时运行此null函数？

如果我只是在render()之前运行该函数，则表明状态未更新。

Answer 1

您可以将useEffect挂钩与空的依赖项数组一起使用。