实例化 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，因此您可能需要在渲染任何内容之前进行一些空值检查。

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

How do I execute an async function that updates state when I instantiate a React component?

javascript

async-await

typescript

reactjs

react-component