Redux道具不确定

我正在尝试编写聊天网络应用程序。在以下代码中，如果我排除了与对话有关的所有代码，则可以正常工作（如果我只加载用户名并尝试发送消息，那很好）。但是，一旦我添加了与对话有关的所有代码，它将不断弹出和错误消息" this.props.recipients不确定"。但是在添加任何与对话相关的代码（即，LoadConversations（）＆amp; consectList（））之前，它可以正常工作。在添加这些代码之前，我能够访问this.prop.recipient（如用户列表中所示）。我在做什么错？

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;
    }
}

这是错误消息

堆栈： chatbundle.js：19501：16 nMeasureLifecycleperf@http：//localhost：8000/chatbundle.js：18781：12 n_rendervalidevalidectomponation-componentwithoutownerororororcontext，：//http：//localhost：8000/chatbundle.js：19350：7 nreceivecomponent@http：//localhost：8000/chatbundle.js：19252：5 nreceivecomponent5 n_updaterenderedComponent@http：//localhost：8000/chatbundle.js：19459：7 n_performcomponentupdate@http：//http：//localhost：8000/chatbundle.js：19429：19429：5 nupdatecoment@httpp：/////////////8000///////////////////////////////////////////////////////////////chttp：8000：8000：8000：8000。JS：19350：7 nperformupdateifnequect@http：//localhost：8000/chatbundle.js：19266：7 nperformupdateifnexces@http：//http：//localhost：8000/chatbundle.js：2787：2787：5 nrunbatchedupdate @///////8000/chatbundle.js：1399：5 nperform@http：//localhost：8000/chatbundle.js：3913：13 nperform@http：//localhost：8000/chatbundle.js：3913：3913：13 nperform@http：http：http：3913：//localhost：8000/chatbundle.js：1338：12 nflushbatchedupdates@http：//localhost：8000/chatbundle.js：1421：7 ncloseall@http：//http：//localhost：8000/chatbundle.js：8000/chatbundle.js：3979：3979：3979：1111 11 nperform@http：//localhost：8000/chatbundle.js：3926：11 nbatchedupdates@http：//localhost：8000/chatbundle.js：20569：14 nenqueueupdate@nenqueueupdate@http@http@http：//localhost：8000/chatbundle.8000/chatbundle.js：8000/chatbundle.js：1449：5 nenqueueupdate@http：//localhost：8000/chatbundle.js：5857：3 nenqueuesetState@http：//http：//localhost：8000/chatbundle.js：6051：6051：5 nreacontcomponent.state.setate.setate.setate.setate.settate.settate-state-state-state-state-state-state-htppp.localhost：8000/chatbundle.js：6663：3 nonstatechange@http：//localhost：8000/chatbundle.js：10542：11 ndispatch@http：//http：//localhost：8000/chatbundle.js：10848：7 ncreattrewarewarehttp：//localhost：8000/chatbundle.js：24511：16 ndispatch@http：//localhost：8000/chatbundle.js：24261：18 nloadConversations/httpp：//http：//http：//localhost：8000/chatbundle.js：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：25207：4 n"

事实证明我的还原器中有一个错误。我忘了添加传播操作员，因此它完全消除了以前的状态。

应该是

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;
    }
}

相关内容

最新更新

热门标签：