心有法竹
2023-04-27 10:25:21
我對 React 和 Redux 很陌生,所以問題可能很明顯。我嘗試使用 fetch API 從我的服務(wù)器通過用戶 ID獲取一些信息componentDidMount我對 DC 的本地狀態(tài)沒有問題——我需要從 Redux獲取用戶 IDimport React from 'react';import {connect} from 'react-redux';class DrinkPage extends React.Component { constructor() { super(); this.state = { DCs: [], }; } async componentDidMount() { const response = await fetch( `http://localhost:5000/api/drinks/users/${this.props.currentUser.id}`, ); console.log(this.props.currentUser.id); const json = await response.json(); await this.setState({DCs: json.drinkCons}); } render() { const DC = this.state.DCs; console.log(this.props.currentUser, 'render'); return ( <div className="App"> <CardList DCs={DC} /> </div> ); }}const mapStateToProps = (state) => ({ currentUser: state.user.currentUser,});export default connect(mapStateToProps)(DrinkPage);但是當(dāng)我嘗試從中獲取當(dāng)前用戶的狀態(tài)時,componentDidMount()它是null。在渲染中,它實際上顯示了狀態(tài)。我應(yīng)該怎么做才能從服務(wù)器獲取狀態(tài)componentDidMount()并成功從服務(wù)器獲取信息?
1 回答

慕少森
TA貢獻(xiàn)2019條經(jīng)驗 獲得超9個贊
我找到了答案。
我應(yīng)該用componentDidUpdate()而不是componentDidMount()
并且還需要檢查狀態(tài)以避免無限循環(huán)。
所以最后componentDidUpdate()應(yīng)該是這樣的:
async componentDidUpdate() {
const response = await fetch(`http://192.168.0.16:5000/api/drinks/users/${this.props.currentUser.id}`);
const json = await response.json();
if (this.state.DCs.length === 0) {
await this.setState({ DCs: json.drinkCons });
}
}
添加回答
舉報
0/150
提交
取消