如何在实例化 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 挂钩与空依赖数组一起使用。

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

useEffect(() => {
  getInfo(queryString);
}, []); // <-- runs only once when component mounts

注意：初始状态值为 null，因此您可能需要在渲染任何内容之前进行一些 null 检查。