Как выполнить функцию asyn c, которая обновляет состояние при создании экземпляра компонента 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?

Если я просто запускаю функцию до I 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, поэтому вам может понадобиться выполнить какую-либо проверку на ноль перед тем, как что-либо визуализировать.