Question

我正在创建一个简单的react-redux聊天应用程序。我设法在我的消息组件中显示了来自我的redux状态的一些伪数据。我成功从我的Submit组件将新的“消息”推送到了redux状态。但是新项目不会在Message组件中呈现。

因此，我尝试从messageReducer控制台记录以前的状态和新的状态，它似乎可以工作。我得到了包含所有伪数据和新推送对象的状态数组。

如果需要，这里是Github仓库：https://github.com/MichalK98/Chat.V.2

//消息组件

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Message extends Component {
    render() {
        return (
            <ul id="chatroom">
                {this.props.messages.map((msg) => (
                    <li className={(msg.username == 'You' ? "chat-me" : "")} key={msg.id}>
                        <p>{msg.message}</p>
                        <small>{msg.username}</small>
                    </li>
                )).reverse()}
            </ul>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        messages: state.message.messages
    }
}

export default connect(mapStateToProps)(Message);

//提交组件

...
import { connect } from 'react-redux';
...

class Submit extends Component {

    state = {
        message: []
    }

    clear = async () => {
        await this.setState({
            message: ''
        });
    }

    handleChange = async (e) => {
        await this.setState({
            message: e.target.value
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.writeMessage(this.state.message);
        this.clear();
    }

    render() {
        return (
            <div className="chat-footer">
                <form onSubmit={this.handleSubmit} autoComplete="off">
                    <input  onChange={this.handleChange} value={this.state.message} type="text" placeholder="Skriv något..."/>
                    <button id="btnSend"><SendSvg/></button>
                </form>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        messages: state.messages
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        writeMessage: (message) => { dispatch({type: 'WRITE_MESSAGE', messages: {id: Math.random(), username: 'You', message: message}})}
    }
}

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

// messageReducer

const initState = {
    messages: [
        {id: 1, username: 'You', message: 'Hi, data from reducer!'},
        {id: 2, username: 'Mattias', message: 'Wow..'},
        {id: 3, username: 'Alien', message: 'Awesome!'}
    ]
}

const messageReducer = (state = initState, action) => {
    if (action.type === 'WRITE_MESSAGE') {
        state.messages.push(action.messages);
        console.log('Action ',action.messages);
        console.log('State ',state.messages);
    }
    return state;
}

export default messageReducer;

我希望在将新对象添加到messageReducer中的状态数组时，新数据将在Message组件中呈现。

Answer 1

首先应在Message Component中更改mapStateToProps：

const mapStateToProps = (state) => {
    return {
        messages : state.messages
    }
}

然后在消息缩减器中，您应该更改缩减器。这是减速机的更好方法。您不应该直接更改状态：

const messageReducer = (state = initState, action) => {
    switch (action.type) {
        case "WRITE_MESSAGE":
            return { ...state, messages: [...state.messages, { ...action.messages }] }
        default:
            return state;
    }
}

如果您需要任何帮助，我可以帮助您完成您的项目：-）

状态更新，但组件未重新呈现

1 个答案: