1
私のコンポーネントはレンダリングされていないので、エラーは発生しません。私は何時間もこのエラーに立ち往生していますので、私はアドバイスを探しています！React/Reduxコンポーネントはレンダリングされません
componentWillMount（）を使用してページが読み込まれたときに表示するデータを取得しようとしていますが、現在何も表示されていません。私はコンポーネントで簡単な文字列をレンダリングすることができませんでした。今、私はコンポーネントからコンソールログを取得していない、テキストではなく、何も...私のAPIは動作しますが、私はクロムコンソールでhttp呼び出しを取得していません。以下は私のファイルです。
indexTimesheet.js（成分）
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import getTimesheet from '../actions/getTime';
class IndexTimesheet extends Component {
componentWillMount() {
console.log("test");
this.props.getTimesheet();
}
render() {
return (
<h3>Index Timesheet</h3>
);
}
}
IndexTimesheet.propTypes = {
getTimesheet: PropTypes.func
};
export default connect(null, {getTimesheet})(IndexTimesheet);
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import {Router, Route, browserHistory} from 'react-router'; // , IndexRoute
import promise from 'redux-promise';
import reducers from './app/reducers';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// components
import {IndexTimesheet} from './app/components/indexTimesheet';
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path="/" component={IndexTimesheet}/>
</Router>
</Provider>,
document.getElementById('root')
);
getTime.js（アクションファイル）
import axios from 'axios';
export const GET_TIME = 'GET_TIME';
export const ROOT_URL = 'http://127.0.0.1:3055/api/v1/timesheet/';
export function getTimesheet() {
const request = axios.get(ROOT_URL);
return {
type: GET_TIME,
payload: request
};
}
タイムシートreducer.js
import {GET_TIME} from '../actions/getTime';
const INITIAL_STATE = {all: [], user: []};
export default function (state = INITIAL_STATE, action) {
switch (action.type) {
case GET_TIME:
return {state, all: action.payload.data};
default:
return state;
}
}
インデックス減速
import {combineReducers} from 'redux';
import TimesheetReducer from './timesheet';
const rootReducer = combineReducers({
time: TimesheetReducer
});
export default rootReducer;