Question

由于某些原因，当（redux）状态改变时，反应不会重新呈现。可能是因为它嵌套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;

看起来不对。

您正在执行此操作，这意味着必须是this.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'] } }的其他位置。那么它是一个数组还是一个对象？

但假设，我们说它确实有效。你说国家已经正确改变了。

我们假设初始状态为

const newState = getState().users.users; // ['12345', '67890']
delete newState[userhash]; // ['67890'] if you use your imagination

dispatch({
     type: DELETE_USER,
     payload: {
         data: newState // ['67890']
})

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

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

最后，在reducer中

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

所以最终状态是

{{1}}

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

React没有响应（redux）状态变化吗？

2 个答案: