Question

我讨厌再次提出这个问题，但我不知道问题出在哪里，而且我已经研究了这个网站上其他类似答案的问题。我试图尽可能地简化这个，只是为了看看我是否可以得到任何工作，但我仍然遇到同样的问题。它不会使用新状态更新组件。我看到控制台中记录的信息，但组件没有使用新状态更新...

prev state Object {myTest: Object}
index.js:168 action Object {type: "FETCH_MY_TEST_FULFILLED", payload: Array[4]}
index.js:176 next state Object {myTest: Object}

这里的行为是my-test-actions.js ......

const myData = [
    {
        title: 'some title 1',
        content: 'some content 1'
    },
    {
        title: 'some title 2',
        content: 'some content 2'
    },
    {
        title: 'some title 3',
        content: 'some content 3'
    },
    {
        title: 'some title 4',
        content: 'some content 4'
    }
];

export function fetchMyTest() {
    return function (dispatch) {
        dispatch({type: "FETCH_MY_TEST_FULFILLED", payload: myData});
    };
}

这里是reducer my-test-reducer.js ......

const actions = {
    FETCH_MY_TEST_FULFILLED: (state, {payload}) => {
        return Object.assign({}, state, {
            fetching: false,
            fetched: true,
            searchData: payload
        });
    }
};

const reducer = (state = {
    searchData: [],
    fetching: false,
    fetched: false,
    error: null
}, action) => {
    return (actions[action.type]) ? actions[action.type](state, action) : state;
};

export default reducer;

这是组件my-test.js ...

import React, {PropTypes, Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as myTestActions from '../actions/my-test-actions';

class MyTest extends Component {

    componentWillMount() {
        this.props.fetchMyTest();
    }

    renderSearchData(searchData) {
        let content = [];

        searchData.map((item, key) => {
            content.push(<div key={key}><h2>{item.title}</h2><p>{item.content}</p></div>);
        });

        return content;
    }

    render() {
        const {searchData} = this.props;

        console.log(this.props)

        return (
            <div className="my-test">
                {(searchData && searchData.length) ? this.renderSearchData(this.props.searchData) : 'No Data'}
            </div>
        );
    }
}

MyTest.propTypes = {
    error: PropTypes.string,
    fetchMyTest: PropTypes.func,
    fetching: PropTypes.bool,
    searchData: PropTypes.array
};

function mapStateToProps(state) {
    return { 
        error: state.myTest.error,
        fetching: state.myTest.fetching,
        searchData: state.myTest.searchData
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(myTestActions, dispatch);
}

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

因此，我得到的输出是＆＃34;没有数据＆＃34;因为看起来searchData没有更新。再次，抱歉再次询问，我已经查找了其他答案，但我似乎无法弄清楚我错过了什么或者我哪里出错了。我此刻不知所措。

Redux不会更新React组件

0 个答案: