无法在反应中显示来自减速器的消息

debugcn 发表于 Dev

士兵

我试图message 'hello brozz..'从减速器显示到组件render()方法。ComponentDidMount()得到this.props.message作为请看图片。我的减速机就像

 export const geod = (state ={}, action) => {
      console.log('inside reducer');
        switch(action.type){


            case 'INITIAL_MESSAGE':

              return [
                        ...state, {
                          message:'hello brozz..'
                        }
                      ]
            case 'CLICK_MESSAGE':
                  return [ 
                            ...state, { 
                                            message: ''
                                      }
                          ]
            default:
                    return state;
        }

     };

但是我不能在渲染方法中使用this.props.messageas <div><div>{this.props.message}</div></div>。我收到错误

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons

我的组件是，

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { initialMessageAction, clickButtonAction } from './redux.js';
import { connect } from 'react-redux';
import { Message } from './messageComponent';

class App extends Component {

  componentWillMount() {
    console.log('component will mount');
    let data = this.props.initialMessageAction();
  }
  componentDidUpdate() {
    console.log('comp Did Update')
    console.log(this.props.message)
  }
  render() {

    return (
      <div className="App">
        <div className="App-header">        
        </div>
        <p className="App-intro">
        react-redux-data-flow
        </p> 
              <div>{this.props.message}</div>
             <div>{this.props? <div>hi ..<button onClick={ () => this.props.clickButtonAction() }>hide message</button></div>: ''}</div>
      </div>
    );
  }
}


    const mapStateToProps = (state, ownProperty) => ({ 

    message:state.geod,   


  });   

   const mapDispatchToProps =  { 

     initialMessageAction,
    clickButtonAction

  } 

  export default connect(
                             mapStateToProps,
                             mapDispatchToProps

                    )(App);

安德鲁

const initialState = {message: null};
 export const geod = (state = initialState, action) => {
      console.log('inside reducer');
        switch(action.type){
            case 'INITIAL_MESSAGE':
                return Object.assign({}, state, {message:'hello brozz..'});
            case 'CLICK_MESSAGE':
                return Object.assign({}, state, {message: ''}); 
            default:
                return state;
        }

     };

而在stateMap { message: state.geod.message }。

作为初始状态您使用一个空对象并且您看到它是错误的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。