React-Redux Connect 收到空状态答案

【问题标题】：React-Redux Connect receives empty stateReact-Redux Connect 收到空状态
【发布时间】：2021-01-10 17:37:42
【问题描述】：

我有一个反应组件正在使用反应路由器呈现客户端。我有一个在调度后成功填充的 redux 商店（因此我相信 action 和 reducer 工作正常）

当connect mapStateToProps函数触发时问题就来了，状态为空。

我已经订阅了 store 和 console.log(store.getState())，我可以看到状态设置正确。

我哪里错了？

class MyComponent extends Component {

componentWillMount(){

    this.props.fetchData();

}
render(){
  console.log(this.props);
  return(<div>{this.props}</div>
}

const mapStateToProps = (state) => {
console.log(state); //This is empty e.g. { form : {} }
return {
    formJSON: state.form
}
};

const mapDispatchToProps = { fetchData};

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

反应路由器的东西

class ClientApp extends Component {


render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <Switch>
            <Route exact path="/" >
              <div>Root</div>
            </Route>
            <Route path='/mycomponent'>
              <Container fluid>
                <Row>
                  <Col lg={2}>
                    <MyComponent/>
                  </Col>
                  <Col lg={7}>
                    <OtherComponent />
                  </Col>
                  <Col>
                    <YetAnotherComponent/>
                  </Col>
                </Row>
              </Container>
            </Route>
          </Switch>
        </Router>
      </Provider>      
    );
  }
}

export default ClientApp;

【问题讨论】：

您可以检查开发工具，看看您是否从状态中选择了正确的数据。如果你想在 jsx 中转储一个 js 对象，你可以这样做：return(<pre>{JSON.stringify(this.props,undefined,2)}</pre>
我无法安装 devtools，因为我被政策阻止了。我确实已经说明了该州的情况。它是{ form: {} }，即表单为空。我希望这里有数据。如果我使用 subscribe 方法查看商店中的状态，则它已正确填充。我的问题是为什么将一个空（或初始）状态传递给连接组件？
通过一些战略性的console.logs，我设法缩小了问题的范围。我能说的是存储状态已初始化，然后由调度进一步设置。连接组件仅在初始化时触发一次 mapStateToProps，但在调度更新状态时不会触发。这就是为什么我的道具是空的/在初始状态。为什么不调用 mapStateToProps 函数的任何想法？
我安装了 redux-logger 并确认 action、dispatch 和 reducer 工作正常。这是连接组件行为不端/设置不正确...
你可能在 reducer 中改变了状态，所以连接永远不会被触发，因为 react-redux 没有注意到任何变化。

标签： reactjs redux react-redux

【解决方案1】：

你可以试试这个：

import React from "react";
import "./cart-icon.styles.scss";
import { connect } from "react-redux";
import { fetchData } from "path for fetchData";

class MyComponent extends Component {
constructor(props){
super(props);
this.state={
formJSON:{}
 }
}

componentDidMount(){
    this.props.fetchData();
}

componentDidUpdate(prevProps){
   if(prevProps.formJSON !==this.props.formJSON){
     this.setState({formJSON})
  }
}

render(){
  console.log(this.state.formJSON);
  return(<div>{this.state.formJSON}</div>
}}

const mapStateToProps = ({form}) => ({
  formJSON:form
});

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

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

【讨论】：