useContext在第一次刷新时不读取值

Question

export const LoginContext = React.createContext();
export const DetailsContext = React.createContext();
function App() {
const username = localStorage.getItem("bankDetails");
const [userDetails, setUserDetails] = useState({});
const [isValid, setisValid] = useState(false);
useEffect(() => {
if (username !== null) {
Axios.post("http://localhost:3001/userDetails", {
username: username,
}).then((res) => {
if (res.data.err) {
console.log("err");
} else {
setUserDetails(res.data.details[0]);
setisValid(true);
}
});
}
}, []);
return (
<LoginContext.Provider value={{ isValid, setisValid }}>
<DetailsContext.Provider value={{ userDetails, setUserDetails }}>
<Router>
<Routes>
<Route ... />
</Routes>
</Router>
</DetailsContext.Provider>
</LoginContext.Provider>
);
}
export default App;

Transactions.js

function Transactions() {
const { isValid } = useContext(LoginContext);
const { userDetails, setUserDetails } = useContext(DetailsContext);
const [allDetails, setAllDetails] = useState([]);
const [transactions, setTransactions] = useState([]);
useEffect(() => {
console.log(userDetails);
Axios.get("http://localhost:3001/transactTo").then((rest) => {
setAllDetails(rest.data);
});
// setTransactions(JSON.parse(userDetails.transactions));
}, [userDetails]);
return isValid ? <h1>Valid</h1> : <h1>Not Valid</h1>
}
export default Transactions;

userDetails首先记录一个空对象，然后在重新渲染后记录一个数据对象，但在取消setTransactions(JSON.parse(userDetails.transactions))部分的注释后，它只记录一个空对象，然后显示一个错误:Unexpected token u in JSON at position 0。这只发生在页面刷新时，而不是当我从另一个页面导航时。

还尝试添加第二效果，但没有帮助:

useEffect(() => {
setTransactions(JSON.parse(userDetails.transactions));
}, [allDetails]);

Answer 1

它是一个空对象，因为API请求是异步的。这是很正常的事情。

Unexpected token u in JSON at position 0这意味着userDetails.transactions不是json。可能是undefined，所以u

useEffect(() => {
// try returning when the property is `undefined`
if (!userDetails.transations) return;
setTransactions(JSON.parse(userDetails.transactions));
}, [allDetails]);