Question

我有一个使用componentDidMount()方法的组件，该组件可以从服务器获取信息，如下所示：

componentDidMount() {
    this.getAccount();
}

getAccount = async () => {
    try {
        this.res = await API.get(`account`, {});
        this.props.setData(this.res.data);
    } catch (err) {
        this.props.history.push(`/add`);
    }
}

我有一个减速器来存储信息：

const initialState = {}

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return action.data;
    } else {
        return state;
    }
}

export default accountReducer;

但是执行操作后，我的组件没有重新渲染。为什么？我的动作代码是：

export const setData = (data) => {
    return {
        type: 'SET_ACCOUNT_DATA',
        data
    }
}

请帮助，我在做什么错了？

更新：我的地图方法是：

const mapStateToProps = (state) => ({

})

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

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

Mu动作import是正确的。已检查。

Answer 1

在您的化合器中，您可能想要复制原始状态并添加对它的更改，因此我认为您的化合器应该看起来像：

const accountReducer = (state = initialState, action) => {
  if (action.type === 'SET_ACCOUNT_DATA') {
    return {...state, data: action.data};
  } else {
    return state;
  }
}

如果您的组件有mapStateToProps()，该对象将返回空对象，那么如果没有props / state更改，则该组件不会重新渲染... mapStateToProps()方法应也许像这样：
```
const mapStateToProps = state => ({
  data: state.yourReducer.yourDataFromStore
})
```

Answer 2

您是否通过放置console.log（'state :::'，state）;进行了检查？在mapStateToProps（）内部？再叫一次吗？您还可以尝试

const accountReducer = (state = initialState, action) => {
    if (action.type === 'SET_ACCOUNT_DATA') {
        return Object.assign({}, state, {...state, data:action.data });
    } else {
        return state;
    }
}

和您的mapStateToProps

const mapStateToProps = (state)=>({
  data: state.reducername.data
})

为什么Redux不重新渲染组件？

2 个答案: