javascript - 从 mapStateToProps 接收旧状态，而不是新状态

Question

我是该网站的新手，也是 React 的新手。如果有人能帮助我，我会很高兴。我建立了一个聊天室，它允许在用户之间发送消息，一切都很好。但是我认为mapStateToProps有一个问题，因为当我添加一条新消息时，状态本身只有在我刷新页面时才会改变。我希望它立即更改，我将立即在聊天中看到对话，而不是在页面刷新中。

这是我写的代码，如果有人能帮助我，我会很高兴，如果我需要添加更多代码，我会这样做。

代码解释一下，我有一个聊天组件，这里做mapStateToProps，用state什么redux，我还有一个chatReducer文件，负责管理聊天的状态，其实可能有问题，因为我更新状态，我不明白。只有刷新页面后，我才明白。

我有另一个chatAction 文件——我通过它调用chatReducer。

我认为问题很小，我可能没有在 ChatReducer 或 mapStateToProps 中输入正确的代码，但除此之外一切正常。

如果有人能帮助我，我会很高兴，我是该网站的新手。

另一件事，问题是，我有很多对话。它来自 mapStateToProps，来自 state.chat。通过 submitMessage 函数添加新调用后，我设法将消息添加到数据库中，但状态本身并没有直接更新，这就是问题所在。当有人发送直接消息时，我希望它会在聊天中更新。

聊天组件

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { getRealtimeUsers } from '../redux/actions/chatActions';
import { updateMessage } from '../redux/actions/chatActions';
import { getRealtimeConversations } from '../redux/actions/chatActions';


class chat extends Component {
    state = {
        message: '',
        chatStarted: false,
        chatUser: '',
        userUid: null
    }
    componentDidMount() {
        this.props.getRealtimeUsers();
    }


    initChat = (user) => {

        this.setState({
            chatStarted: true,
            chatUser: user.handle,
            userUid: user.handle

        });
    }


    submitMessage = (e) => {

        const msgObj = {
            user_uid_1: this.props.user.credentials.handle,
            user_uid_2: this.state.userUid,
            message: this.state.message
        }

        if (this.state.message !== "") {
            this.props.updateMessage(msgObj);
            this.setState({ message: '' });
        }

        console.log(msgObj);

    }

    render() {

        return (

            <section>

                <div>

                    <div>
                        {
                            this.state.chatStarted ?

                                this.props.chat.conversations.map(con =>
                                    <div>
                                        <p>{con.message}</p>
                                    </div>)
                                : null
                        }


                    </div>
                    {
                        this.state.chatStarted ?
                            <div>
                                <textarea
                                    value={this.state.message}
                                    onChange={(e) => this.setState({ message: e.target.value })}
                                    placeholder="Write Message"
                                />
                                <button onClick={this.submitMessage}>Send</button>
                            </div> : null
                    }


                </div>
            </section>
        );
    }
}

const mapStateToProps = (state) => ({
    data: state.data,
    chat: state.chat,
    user: state.user
});

export default connect(
    mapStateToProps,
    { getRealtimeUsers, updateMessage, getRealtimeConversations }
)(chat);

聊天减速器

import { userConstants } from "../types"

const initialState = {
    users: [],
    conversations: []
}

export default function (state = initialState, action) {

    switch (action.type) {
        case `${userConstants.GET_REALTIME_USERS}_REQUEST`:
            return {
                ...state
            }
        case `${userConstants.GET_REALTIME_USERS}_SUCCESS`:
            return {
                ...state,
                users: action.payload
            }
        case userConstants.GET_REALTIME_MESSAGES:
            return {
                ...state,
                conversations: action.payload
            }
        case `${userConstants.GET_REALTIME_MESSAGES}_FAILURE`:
            return {
                ...state,
                conversations: []
            }
        default:
            return state;
    }
}

聊天动作

import { userConstants } from "../types";
import axios from 'axios';

export const getRealtimeUsers = () => (dispatch) => {
    dispatch({ type: `${userConstants.GET_REALTIME_USERS}_REQUEST` });
    axios
        .get('/realtimeUsers')
        .then((res) => {
            console.log(res);
            dispatch({
                type: `${userConstants.GET_REALTIME_USERS}_SUCCESS`,
                payload: res.data
            });
        })
        .catch((err) => console.log(err))
}

export const updateMessage = (msgObj) => (dispatch) => {

    axios.post('/updateMessage', msgObj)
        .then(() => {console.log("message added") })
        .catch((err) => console.log(err));
}

export const getRealtimeConversations = (user) => (dispatch) => {

    axios.get('/realtimeConversations', 
    {
        params: {
            user: JSON.stringify(user)
        }
      }
    )
        .then((res) => {
            dispatch({
                type: userConstants.GET_REALTIME_MESSAGES,
                payload: res.data
            });
        })
        .catch((err) => console.log(err))

}

标签： javascriptreactjsreduxreact-redux