내가 아이 컴퍼넌트 아래와 같이 상점에 연결하고 표시하는 구성 요소가 저장에 연결하지 :하위 구성 요소는
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;
};
자식 컴포넌트의'connect' 함수에서,'mapDispatchToProps'는 첫번째가 아닌 두번째 인자가되어야합니다. –
그건 내가 잘못한 일들을 보면서 다른 일을 시도하면서 실제로 저에게서 왔습니다. 나는 그것을 바꾸었고 여전히 소품으로 파견이나 행사가 없었다. – Ryan