現在、このビットを含む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()と、状態が更新されていないことが示されます。
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チェックを行う必要がある場合があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加