Question

我正在尝试构建一个React Redux应用程序，在其中，当我按下添加消息按钮时，一条消息将以reducer的初始状态添加到消息数组中，但是当我进行编译时，却出现了一个名为“ 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
  }}
};

现在，对于reducer，您需要使用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;

list.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！

无法读取React-Redux App中未定义的属性“状态”

1 个答案: