使用redux时无法读取react应用程序中未定义的属性“状态”

Question

我正在尝试构建一个 react redux 应用程序，其中当我按下添加消息按钮时，一条消息被添加到减速器初始状态的消息数组中，但是当我编译时，我收到一个名为“TypeError: newstate1.user”的错误。当我按下添加消息按钮时，id.find 不是一个函数。请耐心等待，因为我对 react 和 redux 还很陌生。

import {ADD_MESSAGE,ADD_AUTHOR} from "../constants/action-types"

    export function addMessage(payload) {
      return {type: ADD_MESSAGE, payload}
    };

    export function addAuthor(userName,id){
      return{type: ADD_AUTHOR,payload:{
        userName:userName,
        id:id
      }}
    };

Answer 1

当您尝试将用户名分配给您的阵列时会发生错误。 将此复制到您的文件中，它现在可以工作：

在这里要获取消息中的数组，您需要将特定属性传递给您的操作，这将是property_id ：

动作文件：

    import {ADD_MESSAGE,ADD_AUTHOR} from "../constants/action-types"

export function addMessage(payload) {
  return {type: ADD_MESSAGE, payload}
};

export function addAuthor(userName,id){
  return{type: ADD_AUTHOR,payload:{
    userName:userName,
    id:id
  }}
};

现在对于减速器，您需要使用find()方法find()具有此property_id的数组。

减速器.js

//Reducers produce the state of the application
//State is changed by dispatching an application
import {
  ADD_MESSAGE,
  ADD_AUTHOR
} from "../constants/action-types"


const initialState = {
  messages:[{
    property_id: 12,
    members: [
      "user1",
      "user2"
    ],
    message: [{
        message: "Hello",
        author: "user1"
      },
      {
        message: "How are you",
        author: "user2"
      },
      {
        message: "Whats going on",
        author: "user3"
      },
    ]
  }]
};

function rootReducer(state = initialState, action) {
  if (action.type === ADD_MESSAGE) {
    return Object.assign({}, state, {
      messages: state.messages.concat(action.payload)
    });
  }
  if(action.type === ADD_AUTHOR){
    return Object.assign({},state,{
      messages:[{...state.messages.find(el=>el.property_id===action.payload.id),
        members:[...state.messages.find(el=>el.property_id===action.payload.id).members,action.payload.userName]
      }]
    })
  }

  return state;
}

export default rootReducer;

列表.jsx

在这里，我为每个元素添加了一个特定的属性，即id ：

import React from "react";
import { connect } from "react-redux";

const List = ({ messages ,members}) => {
  return (
    <div>
    <ul className="list-group py-2">
    <h3>available members:</h3>
    {messages.map(el => (
      el.members.map(member=>(
         <li className="list-group-item list-group-item-action" id={el.property_id} key={member}>{member}</li>
    ))))
    }
  </ul>
  <h3>messages:</h3>
  <ul className="list-group  py-2">
    {messages.map(el => (el.message.map(message=>(
         <li className="list-group-item list-group-item-action" id={el.property_id} key={message.author}>message:{message.message} by {message.author}</li>
    ))))
    }
  </ul>
  </div>
  )
}
const mapStateToProps = (state) => {
  return {
    messages:state.messages
  }
}

export default connect(mapStateToProps)(List)

对于你的 App.js，我们为addAuthor()传递第二个参数，它是消息的id ：

import React from 'react';
import './App.css';
import List from "./js/components/List";
import 'bootstrap/dist/css/bootstrap.min.css';
import { connect } from 'react-redux';
import {addAuthor} from './js/actions/index'

class App extends React.Component {
  handleSubmit=()=>{
    this.props.addAuthor("user3",12)
  }
  render () {
   return (  <div>
        <div className="container-fluid">
        <div><List/></div>
         <button className="btn btn-danger" onClick={this.handleSubmit}>Add User</button>
         <p className="text-success">Enjoy</p>
      </div>
    </div>)
  }
}



const mapDispatchToProps = (dispatch) => {
  return {
    addAuthor:(userName,id) => {
      dispatch(addAuthor(userName,id))
    }
  }
}

 App = connect(
  null,
  mapDispatchToProps
)(App)

export default App;

在这里我通过了id=12但你可以从组件中获取你的 id！