Question

我目前正在使用react，redux和firebase构建应用程序。我已经将redux连接到firebase，并且正在从集合中获取数据。问题是，当我尝试将redux状态映射到我的组件时，在状态被映射之前，该组件就会渲染，这在尝试使用.map（）

时给了我一个错误

//Component I want to map the state to
import React, { Component } from "react";
import { Card, Button } from "reactstrap";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { compose } from "redux";
import { firestoreConnect } from "react-redux-firebase";

export class Home extends Component {
componentDidUpdate() {
console.log(this.props.categories);
}
render() {
const { categories } = this.props;
return (
  <div className="container">
    <div className="row">
      {/* {this.props.categories.map((item, i) => (
        <div className="col-12 mt-3" key={i}>
          <Link to={`/category/${item}`}>
            <Card body inverse color="primary">
              <Button color="primary">{item}</Button>
            </Card>
          </Link>
        </div>
      ))} */}
      <div className="col-12 mt-3">
        <Link to="/new/category">
          <Card body inverse color="success">
            <Button color="success">Add Category</Button>
          </Card>
        </Link>
      </div>
      <div className="col-12 mt-3">
        <Link to="/new/item">
          <Card body inverse color="success">
            <Button color="success">Add Item</Button>
          </Card>
        </Link>
      </div>
      <div className="col-12 mt-3">
        <Link to="/history">
          <Card body inverse color="warning">
            <Button color="warning">History</Button>
          </Card>
        </Link>
      </div>
    </div>
  </div>
);
}
}

const mapStateToProps = state => {
// console.log(state);
return {
categories: state.firestore.ordered.categories
};
};

export default compose(
connect(mapStateToProps),
firestoreConnect([{ collection: "categories" }])
)(Home);

//Store.js file
import {
createStore,
compose,
combineReducers
} from "../../../../Library/Caches/typescript/3.2/node_modules/redux";
// import thunk from "redux-thunk";
// import rootReducer from "./components/reducers";
import firebase from "firebase";
import "firebase/firestore";
import { reactReduxFirebase, firebaseReducer } from "react-redux- 
firebase";
import { reduxFirestore, firestoreReducer } from "redux-firestore";

var firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxxx",
databaseURL: "xxxxxx",
projectId: "xxxxx",
storageBucket: "xxxxxx",
messagingSenderId: "xxxxx",
appId: "xxxxxx"
};

const rrfConfig = {
userProfile: "users",
useFirestoreForProfile: true
};

firebase.initializeApp(firebaseConfig);
// const firestore = firebase.firestore();

const createStoreWithFirebase = compose(
reactReduxFirebase(firebase, rrfConfig),
reduxFirestore(firebase)
)(createStore);

const rootReducer = combineReducers({
firebase: firebaseReducer,
firestore: firestoreReducer
});

const initialState = {};

// const middleware = [thunk];

const store = createStoreWithFirebase(
rootReducer,
initialState,
compose(
// applyMiddleware(...middleware),
reactReduxFirebase(firebase),
window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__()
)
);

export default store;

要添加更多信息，如果我console.log（this.props.categories）;使用componentDidMount（）我不确定。但是如果我使用componentDidUpdate（），那么我会得到想要的结果

Answer 1

我遇到了同样的问题，我认为这是异步问题，因为您的代码将被执行且状态为空尝试将您的道具记录在componentWillMount中，以确保在渲染之前道具在那里

Answer 2

类似这样的事情应该有所帮助：

class Yourcalss extends Component {


  constructor(props) {

  super(props);

  this.state = { yourstate: [] }
   }

 componentDidUpdate() {
 this.afterFetchProps();
 }

 afterFetchProps = () => {
 const yourState = this.props.map( 
 ///////////// your map )
 this.setState({ yourState });
 }

 render() {
 return(
 <div>{this.state.yourState}</div>
 )
 }

}

状态仅在组件渲染后才映射到props

2 个答案: