Question

我有一个通过componentDidMount()方法获取数据的组件：

async componentDidMount() {
    try {
        this.res = await API.post(`clicks`, {data});
        this.props.setClicksData(this.res.data);
    } catch (err) {
        this.props.setClicksData(1);
    }
}

当服务器抛出错误时，我将点击数据设置为不同于先前状态的任何数据。这是我的reducer：

const initialState = {}

const tableReducer = (state = initialState, action) => {
    let newState;
    switch (action.type) {
        case `SET_CLICKS`:
            newState = JSON.parse(JSON.stringify(state));
            newState = action.data;

            console.log(state);
            console.log(newState);
            console.log(JSON.stringify(state) === JSON.stringify(newState))

            return newState;

        default: return state;
    }
}

export default ipReducer;

从console.log中我看到数据对象是不同的，并且通过字符串化证明了这一点。我的日志是：

{} 
1 
false

我在组件中的Redux连接正常：

const mapStateToProps = (state) => ({
    tableData: state.table.clicks,
})

const mapDispatchToProps = (dispatch) => {
    return {
        setClicksData: (data) => {
            return dispatch(setClicksData(data));
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ClicksTable)

我检查了进口。没关系。那么，如果状态不同，为什么Redux不重新渲染组件？请帮忙！

更新：采取行动后state.table应该是：

{
    totalGood: int,
    totalBad: int,
    clicks: [{}, {}, {}...]
}

我的动作是：

export const setClicksData = (data) => {
    return {
        type: 'SET_CLICKS',
        data,
    }
}

如果状态不同，为什么Redux不重新渲染组件？

0 个答案: