子組件沒有連接到存儲

我有一個連接到存儲和顯示的子組件類似下面的組件：子組件沒有連接到存儲

render() { 
 
     return <div> 
 
      <div className="userBox"> 
 
       <ProfilePhoto userid={this.props.id} /> 
 
      </div> 
 
      <div className="nameTitleBox"> 
 
       <div className="firstLastTitle"> 
 
        <h1>{this.props.firstName} {this.props.lastName}</h1> 
 
       </div> 
 
       <IDBox userid={this.props.id} /> 
 
      </div> 
 
      <div className="childcomponent"> 
 
       <childComponent /> 
 
      </div> 
 
      <div className="profileBox"> 
 
       <EditInterests interestsList={this.props.interest} /> 
 
      </div> 
 
     </div> 
 
    } 
 
} 
 

 
export default connect(
 
\t (state) => state.user, 
 
\t UserState.actionCreators 
 
)(User);

我想要的子組件是一個智能組件加載它自己的數據並控制一切。代碼很簡單。

import * as React from 'react'; 
 
import { Link, RouteComponentProps } from 'react-router-dom'; 
 
import { ApplicationState } from '../../store'; 
 
import { connect } from 'react-redux'; 
 
import * as ChildState from '../../store/childStore'; 
 

 
export class ChildComponent extends React.Component { 
 

 
    componentWillMount() { 
 
     this.props; 
 
    } 
 

 
    render() { 
 
     return (<div> 
 
         <div className="textCenter"><h2 id="sss">{this.props.text}</h2></div> 
 
         <div className="textRight"> 
 
           <input type="button" className="button" value="Yes" /> <b className="textColor">No</b> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>) 
 
    } 
 
} 
 

 
const mapDispatchToProps = (dispatch) => { 
 
    return { 
 
     action: dispatch(ChildState.actionCreators.requestChildren()) 
 
    } 
 
} 
 

 
export default connect(
 
    mapDispatchToProps, 
 
    ChildState.actionCreators 
 
)(ChildComponent);

this.props在子組件始終是一個空的對象。什麼都不是來自孩子的狀態，最初的狀態，行動，派遣......任何東西。我嘗試了一些不同的東西。 ChildState加載正常，如果我實際上加載它在父。不知道爲什麼它沒有載入兒童並連接道具。

添加樓下商店：

import { Action, Reducer } from 'redux'; 
 
import { fetch, addTask } from 'domain-task'; 
 
import { AppThunkAction } from './'; 
 

 
export const actionCreators = { 
 
    requestChildren:() => (dispatch, getState) => { 
 
     let url = 'random'; 
 
     var myheaders = new Headers(); 
 
     myheaders.append("X-Requested-With", "XMLHttpRequest"); 
 
     let fetchTask = fetch(url, { 
 
       headers: myheaders, 
 
       credentials: "same-origin" 
 
      }) 
 
      .then(response => response.json()) 
 
      .then(data => { 
 
       dispatch({ type: 'POST_ACTION', children: data }); 
 
      }); 
 
     addTask(fetchTask); 
 
    } 
 
} 
 

 
export const initialState = { ... }; 
 

 
export const reducer = (state = initialState, incomingAction) => { 
 
    const action = incomingAction; 
 
    switch (action.type) { 
 
    case 'REQUEST_ACTION': 
 
     return { 
 
      ... 
 
     }; 
 
    case 'POST_ACTION': 
 
     return { 
 
     ... 
 
     }; 
 
    default: 
 
    } 
 

 
    return state || initialState; 
 
};

來源

2017-10-21 Ryan

在子組件的'connect'函數中，'mapDispatchToProps'應該是第二個參數而不是第一個參數。 –

這實際上來自我只是嘗試不同的事情，看看是否做錯了事。我改變了它，仍然沒有任何派遣或道具事件。 – Ryan

我相信這個問題是在mapDispatchtoProps你嘗試使用bindActionCreators

bindActionCreators確保行動（ChildState.actionCreators.requestChildren）流通過中間件，如果有任何，然後到減速器

import { bindActionCreators} from 'redux'; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
     ChildState.actionCreators.requestChildren}, dispatch); } 

export default connect(
    ChildState.actionCreators, 
    mapDispatchToProps 
)(ChildComponent);

來源

2017-10-21 20:11:58 Aaqib

試圖添加bindActionCreators。仍然獲得空的道具。我不得不調整一些東西，讓它捆綁正確，但我認爲這是相同的想法？常量mapDispatchToProps =（調度）=> { 返回bindActionCreators（{ requestChild：（）=> { 調度（ChildState.actionCreators.requestChildren（））;} }）; } – Ryan

發生這種情況是因爲我導出了子組件和連接功能。按照預期，我刪除了子組件上的導出並正在工作。

來源

2017-10-22 14:04:50 Ryan

子組件沒有連接到存儲

回答

相關問題