React Redux mapstatetoprops 未定义

Question

我正在使用 React、redux 和 firestore 我正在尝试将用户传递给一个组件，然后使用 uid 从 firestore 中提取一些数据。但是由于未知的（对我来说）原因，我一开始总是得到 undefined 但在第二次渲染时我得到了正确的数据。

App.js:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
    };
  }

  async componentDidMount() {
    const { setCurrentUser } = this.props;
    this.unsubscribeFromAuth = await FB.auth.onAuthStateChanged((user) => {
      console.log('User:', user);
      if (user) {
        this.setState({ user });
        localStorage.setItem('user', user.uid);
      } else {
        this.setState({ user: null });
        localStorage.removeItem('user');
      }
      setCurrentUser(user);
    });
  }

  render() {
    return (
      <Router>
        <div className='App'>
          <Header />
          <Routes>
            <Route path='/' exact element={<Page/>} />
          </Routes>
          <Footer />
        </div>
      </Router>
    );
  }
}

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
});

const mapDispatchToProps = (dispatch) => ({
  setCurrentUser: (user) => dispatch(setCurrentUser(user)),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

用户操作

import { UserActionTypes } from "./user.types";

export const setCurrentUser = (user) => ({
  type: UserActionTypes.SET_CURRENT_USER,
  payload: user,
});

用户选择器：

import { createSelector } from "reselect";

  const selectUser = (state) => state.user;

  export const selectCurrentUser = createSelector([selectUser],(user) => .currentUser

页数：

const Page=({ currentUser }) => {
  const [user, setUser] = useState([]);

  const userDB = async (currentUser) => {
  console.log('userDB START:', currentUser);
    if (!currentUser) return;
    const userUID = currentUser.currentUser.uid;
    const ref = doc(firestore, 'users', userUID);
    const data = await getDoc(ref);
    const dataSet = await data.json();

    if (data) {
//NOTE THAT I NEVER GET IN HERE
      console.log('docSnap.data: ', data.data());
      setUser(data.data());
    } else {
      console.log('No such document!');
    }
  };
 useEffect(() => {
userDB();
}, []);

return ();
};
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
    });

   export default connect(mapStateToProps)(Page)

输出为：

userDB START: undefined

提前致谢！

Answer 1

useEffect(() => {
  userDB(currentUser);
}, []);

如果 mapStateToProps 实际上像您的标题所说的那样未定义

<Route path='/' exact element={<Page currentUser={this.state.user} />} />

Answer 2

已解决！基于@timotgl，谢谢！

App.js: 删除了 localstorage，因为它没有被使用。

页数：

const Page= ({ currentUser }) => {

 const [user, setUser] = useState([]);

  const userDB = async (currentUser) => {
    if (!currentUser) return;
    const userUID = currentUser.uid;
    const ref = doc(firestore, 'users', userUID);
    const data = await getDoc(ref);
    const dataSet = await data;

    if (dataSet) {
      console.log('docSnap.data: ', dataSet.data());
      setUser(dataSet.data());
    } else {
      console.log('No such document!');
    }
  };
//changes in useEffect
  useEffect(() => {
    setUser(userDB(currentUser));
  }, [currentUser]);

  return ();
};
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
});

export default connect(mapStateToProps)(Page);

React Redux mapstatetoprops 未定义

React Redux mapstatetoprops undefined

store

reactjs

redux

react-redux

mapstatetoprops