反应不响应(redux)状态更改

Question

由于某种原因，当(redux(状态改变时，react 不会重新渲染。可能是因为它嵌套了 1 级吗？同样在 redux 检查器中，我可以看到状态已正确更改且符合预期。在手动刷新页面时，我也可以看到它有效。但是我对为什么它不自动重新渲染感到困惑。

简化类组件

class Users extends Component {
    render() {
        const something = this.props.users.users;
        return (
            <div>
                <div className='MAIN_SECTION'>
                    <SearchBar handleChange={(value) => this.setState({searchQuery: value})} />
                    <div className='LIST'>
                        {something.mapObject((user) => <div onClick={() => this.props.deleteUser(user.id)}>{user.name}</div>)}
                    </div>
                </div>
            </div>
        );
    }
}
function mapStateToProps(state) {
    return {
        users: state.users
    };
}
export default connect(mapStateToProps, { deleteUser })(Users);

动作创建者

export function deleteUser(userhash) {
    return function (dispatch, getState) {
        return new Promise(resolve => setTimeout(resolve, 1000)).then(() => {
            const data = {
                status: 200,
                data: {
                    status: 200
                }
            };
            if (data.status === 200) {
                const newState = getState().users.users;
                delete newState[userhash];
                dispatch({
                    type: DELETE_USER,
                    payload: {
                        data: newState
                    }
                });
            }
        });
    };
}

还原剂

const INITIAL_STATE = {
    isFetching: true,
    users: {}
};
case DELETE_USER:
    return {
        ...state,
        users: action.payload.data
    };

Answer 1

一旦你DELETE_USER调度操作，

const something = this.props.users.users;

看起来不对劲。

你正在这样做，这意味着某些东西必须是这个.props.user。

            const newState = getState().users.users;
            delete newState[userhash];
            dispatch({
                type: DELETE_USER,
                payload: {
                    data: newState
                }
            });

在你的渲染中，this.props.users本身就是用户的数组。

要进行脏修复，请将mapStateToProps更改为：

function mapStateToProps(state) {
  return {
    users: state.users.users || state.users
  };
}

渲染更改：

const something = this.props.users;

Answer 2

代码对我来说

并不真正有效。在一个地方，你正在使用.map() users.users，而在另一个地方你正在使用delete[newHash]。那么它是一个数组，还是一个对象？

但假设，假设它确实有效。你说状态已经正确改变。

假设初始状态为

{
    isFetching: true,
    users: { users: ['12345', '67890'] }
}

假设用户"12345"被删除，在操作中，我们有这些事件序列

const newState = getState().users.users; // ['12345', '67890']
delete newState[userhash]; // ['67890'] if you use your imagination
dispatch({
     type: DELETE_USER,
     payload: {
         data: newState // ['67890']
})

最后，在减速机

case DELETE_USER:
return {
    ...state,
    users: action.payload.data // ['67890']
};

所以最终状态是

{
    isFetching: true,
    users: ['67890']
}

它与原始状态的形状不同 - 用户不再具有 users.users。