我有一個關于在類組件中使用狀態的 React 練習。當我撰寫如下代碼時，我的解決方案運行良好：
import React from "react";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lat: null, errorMessage: "" };
window.navigator.geolocation.getCurrentPosition(
(position) => this.setState({ lat: position.coords.latitude }),
(err) => this.setState({ errorMessage: err.message })
);
}
render() {
if (this.state.lat && !this.state.errorMessage) {
return <div>Latitude: {this.state.lat}</div>;
} else if (!this.state.lat && this.state.errorMessage) {
return <div>Erroe: {this.state.errorMessage}</div>;
} else {
return <div>Latitude: Loading...</div>;
}
}
}
export default App;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>但是當我以另一種方式撰寫它時，我沒有錯誤但沒有輸出
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lat: null, errorMessage: "", message: "" };
window.navigator.geolocation.getCurrentPosition(
(position) => this.setState({ lat: position.coords.latitude }),
(err) => this.setState({ errorMessage: err.message })
);
if (this.state.lat && !this.state.errorMessage) {
this.setState({ message: "Latitude: " this.state.lat });
} else if (!this.state.lat && this.state.errorMessage) {
this.setState({ message: "Error: " this.state.errorMessage });
} else {
this.setState({ message: "Loading..." });
}
}
render() {
return <div> {this.state.message} </div>;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>第二種方式有什么問題？
uj5u.com熱心網友回復：
你也可以試試這個方法。
這里還有一個建議，您可以使用 reactfunctional組件而不是class基礎組件。您可以使用該functional組件歸檔所有內容。
const App = () => {
const [lat, setLat] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
window.navigator.geolocation.getCurrentPosition(
(position) => setLat(position.coords.latitude),
(err) => setError(err.message)
);
}, [window.navigator.geolocation]);
if (lat && !error) {
return <div>Latitude: {lat}</div>;
} else if (!lat && error) {
return <div>Erroe: {error}</div>;
} else {
return <div>Latitude: Loading...</div>;
}
};
ReactDOM.render(<App />, document.getElementById("root"));<script
crossorigin
src="https://unpkg.com/react@17/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
></script>
<div id="root"></div>uj5u.com熱心網友回復：
兩個主要問題：
setState 是異步的
即使第二個問題不存在，您也不能在呼叫后立即內省狀態setState；狀態尚未設定。
getCurrentPosition 是異步的
的回呼getCurrentPosition將在未來的不確定時間執行。建構式繼續運行，setState在getCurrentPosition可能呼叫其回呼之前呼叫（基于當前狀態，初始化為空值和空字串）。
（并且沒有理由setState在建構式本身中呼叫（而不是回呼到getCurrentPosition，這很好），您可以像第一次初始化時那樣直接設定狀態。
uj5u.com熱心網友回復：
state 在下一次渲染中獲得新值，但您正在嘗試立即使用它
第一種方法沒有任何問題。如果要將訊息存盤在狀態中，可以在傳遞給的回呼中執行此操作getCurrentPosition
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/357444.html
標籤：javascript 反应 状态 使用状态
上一篇：靜態陣列的好處？[復制]