Question

我正在尝试编写一个聊天网络应用程序。在下面的代码中，如果我排除了与会话相关的所有代码，它可以正常工作（如果我只加载用户名并尝试发送消息，那就没问题）。但是，一旦我添加了与会话相关的所有代码，它就会不断弹出并显示错误消息“this.props.recipients is undefined”。但在添加任何与会话相关的代码（即loadConversations（）＆amp; conversationList（））之前，它工作正常。在添加这些代码之前，我能够访问this.prop.recipients（可以在userList中显示）。我做错了什么？

import React from 'react';
import { connect, Provider } from 'react-redux';
import fetch from 'isomorphic-fetch';
import * as actions from './actions/index'


class Chat extends React.Component{ 
    constructor(props){
        super(props);
        this.state = {recipientId: '', messageBuffer:'asdfadsfasdf'};
        this.userList = this.userList.bind(this);
        this.changeRecipient = this.changeRecipient.bind(this);
        this.insertText = this.insertText.bind(this);
    }
    componentWillMount(){
        this.props.loadConversations();

        this.props.loadRecipients();
    }

    userList(){
        if(this.props.recipients.length == 0){
            console.log('why??');   
        }
        else{
            console.log('here');
            console.log(this.props.recipients.length)
            return this.props.recipients.map(user=>(<option key = {user._id} value = {user._id}>{user.name}</option>));
        }
    }


    changeRecipient(e){
        e.preventDefault();
        this.setState({recipientId: e.target.value});
    }

    insertText(e){
        e.preventDefault();
        this.setState({messageBuffer:e.target.value});
    }

    newMessage(e){
        e.preventDefault();
        var recipientId = this.state.recipientId;
        if (recipientId ===''){
            recipientId = this.props.recipients[0]._id;
        }
        console.log(recipientId);
        console.log(this.state.messageBuffer);
        fetch('/newMessage',
        {
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization' : localStorage.getItem("token"),

            },
            method: "POST",
            body: JSON.stringify({recipient:recipientId, composedMessage:this.state.messageBuffer})
        })
        .then(function(response) {
            console.log(response);
        })
    }

    conversationList(){
        console.log('in conversation list');
        console.log(this.props.conversations.length);
    }

    render(){

        return (
            <div>
                <form onSubmit = {(e) => this.newMessage(e)}>
                    <select name="recipient" onChange = {(e)=> this.changeRecipient(e)}>
                        {this.userList()}
                    </select>
                    <input type = 'text' name = 'composedMessage' onChange = {(e)=> this.insertText(e)}></input>
                    <input type="submit" value="Submit" ></input>
                </form> 
                {this.conversationList}
            </div>)
    }


}

function mapStateToProps(state) {  
    return {recipients: state.recipients, conversations: state.conversations};
}

export default connect(mapStateToProps, actions)(Chat);

这是我的动作创作者

import {LOAD_RECIPIENTS, LOAD_CONVERSATIONS } from './type'

export function loadRecipients(){
    return function(dispatch){
        fetch("/getRecipients",
        {
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization' : localStorage.getItem("token")
            },
            method: "GET",
        })
        .then(function(response) {
            return response.json();
        })
        .then(json=>{
            console.log(json.users);
            console.log('load recipients here!!');
            dispatch({type: LOAD_RECIPIENTS, recipients: json.users});
        })
        .catch(err=>{
            console.log(err);
        });
    }
}

export function loadConversations(){
    return function(dispatch){
        fetch("/getConversations",
        {
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization' : localStorage.getItem("token")
            },
            method: "GET",
        })
        .then(function(response) {
            return response.json();
        })
        .then(json=>{
            console.log(json.conversations);
            console.log('load conversations here!!');
            dispatch({type: LOAD_CONVERSATIONS , conversations: json.conversations});
        })
        .catch(err=>{
            console.log(err);
        });
    }
}

这里是减速器

import {LOAD_RECIPIENTS,LOAD_CONVERSATIONS} from '../actions/type.js';

const initial = {recipients:[], conversations:[]}


export default function(state = initial, action){
    switch (action.type){
        case LOAD_RECIPIENTS:
            return {recipients : action.recipients};
            break;
        case LOAD_CONVERSATIONS:
            return {conversations : action.conversations};
            break;
        default:
            return state;
    }
}

这是错误消息

堆栈： “用户列表@ http://localhost:8000/chatbundle.js:24584:1 \ nrender @ http://localhost:8000/chatbundle.js:24657:7 \ n_renderValidatedComponentWithoutOwnerOrContext / renderedElement＆LT; @ http://localhost:8000/chatbundle.js:19501:16 \ nmeasureLifeCyclePerf @ http://localhost:8000/chatbundle.js:18781:12 \ n_renderValidatedComponentWithoutOwnerOrContext @ http://localhost:8000/chatbundle.js:19500:25 \ n_renderValidatedComponent @ {{3} } \ n_updateRenderedComponent @ http://localhost:8000/chatbundle.js:19527:27 \ n_performComponentUpdate @ http://localhost:8000/chatbundle.js:19451:31 \ nupdateComponent @ http://localhost:8000/chatbundle.js:19429:5 \ nreceiveComponent @ http://localhost:8000/chatbundle.js:19350:7 \ nreceiveComponent @ http://localhost:8000/chatbundle.js:19252:5 \ n_updateRenderedComponent @ http://localhost:8000/chatbundle.js:2755:5 \ n_performComponentUpdate @ http://localhost:8000/chatbundle.js:19459:7 \ nupdateComponent @ http://localhost:8000/chatbundle.js:19429:5 \ nperformUpdateIfNecessary @ http://localhost:8000/chatbundle.js:19350:7 \ nperformUpdateIfNecessary @ http://localhost:8000/chatbundle.js:19266:7 \ nrunBatchedUpdates @ http://localhost:8000/chatbundle.js:2787:5 \ nperform @ http://localhost:8000/chatbundle.js:1399:5 \ nperform @ http://localhost:8000/chatbundle.js:3913:13 \ nperform @ http://localhost:8000/chatbundle.js:3913:13 \ nflushBatchedUpdates @ http://localhost:8000/chatbundle.js:1338:12 \ ncloseAll @ http://localhost:8000/chatbundle.js:1421:7 \ nperform @ http://localhost:8000/chatbundle.js:3979:11 \ nbatchedUpdates @ http://localhost:8000/chatbundle.js:3926:11 \ nenqueueUpdate @ {{ 3}} \ nenqueueUpdate @ http://localhost:8000/chatbundle.js:20569:14 \ nenqueueSetState @ http://localhost:8000/chatbundle.js:1449:5 \ nReactComponent.prototype.setState @ http://localhost:8000/chatbundle.js:5857:3 \ nonStateChange @ http://localhost:8000/chatbundle.js:6051:5 \ ndispatch @ http://localhost:8000/chatbundle.js:6663:3 \ ncreateThunkMiddleware / HTTP：//本地主机：8000 / chatbundle.js：24511：16 \ ndispatch @ http://localhost:8000/chatbundle.js:10542:11 \ nloadConversations / HTTP：//本地主机：8000 / chatbundle.js：25207：4 \ n“个

Answer 1

事实证明我的减速机存在错误。我忘了添加扩展运算符，所以它完全抹去了以前的状态。

应该是

export default function(state = initial, action){
    switch (action.type){
        case LOAD_RECIPIENTS:
            return {...state,recipients : action.recipients};
            break;
        case LOAD_CONVERSATIONS:
            return {...state, conversations : action.conversations};
            break;
        default:
            return state;
    }
}

javascript - redux道具undefine

1 个答案: