Не удается прочитать свойство 'состояние' из неопределенного в приложении React-Redux

Question

Я пытаюсь создать приложение реагировать на избыточность, в котором, когда я нажимаю кнопку добавления сообщения, сообщение добавляется в массив сообщений в исходном состоянии редуктора, но вместо этого при компиляции я получаю сообщение об ошибке «TypeError: newstate1» .user.id.find не работает, когда я нажимаю кнопку добавления сообщения.

Это мои обновленные файлы. Когда я пытаюсь добавить новое сообщение, оно не работает. Я должен json файлы, откуда я беру данные.

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

и теперь для редуктора вам нужно найти массив с помощью этого property_id с find() метода.

reducer.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 но вы можете получить свой идентификатор из компонента!