我有一个 import { mapSetter } from 'path/to/utils/vuex.js';
...
export default {
name: 'ComponentName',
computed: {
...mapSetter(
mapState({
result: ({ ITEMS }) => ITEMS.result,
total: ({ ITEMS }) => ITEMS.total,
current: ({ ITEMS }) => ITEMS.page,
limit: ({ ITEMS }) => ITEMS.limit,
}),
{
limit(payload) {
this.$store.dispatch({ type: TYPES.SET_LIMIT, payload });
},
},
)
},
}
文件用于用户信息。当我AuthContext从api返回的数据时，console.log的设置正确。但是user组件会在之前呈现，因此api返回用户的值，因此在使用上下文的页面上，用户属性始终为null。
有什么解决办法的想法吗？
AuthContext：
AuthContext const AuthContext = React.createContext();
class AuthProvider extends React.Component {
state = {
user: {
name: '',
isAdmin: false,
},
};
componentDidMount = async () => {
try {
const { data: user } = await axios.get('/api/user/GetUser');
this.setState(user);
} catch (error) {}
};
render() {
const { user } = this.state;
return <AuthContext.Provider value={{ user }}>{this.props.children}</AuthContext.Provider>;
}
}
const AuthConsumer = AuthContext.Consumer;
export { AuthProvider, AuthConsumer };
组件，它调用Hedrer：
AuthContext答案 0 :(得分：1)
我认为您不小心忘记了使用大括号来更新状态，
this.setState(user);
您需要将参数setState包装在大括号中，如下所示：
this.setState({ user });
任何状态更改都会触发React重新渲染。有关setState的更多信息，请参见：https://reactjs.org/docs/react-component.html#setstate