Javascript react子组件正在覆盖redux状态

当我的父级渲染它覆盖子级消息时，我为每个父级组件获得了2条相同的消息。请帮帮我。下面是我的父组件。 例如，我的父母有4个项目

{
project1: { message1: 'hello this message for project 1',message2: 'messsage 2 for project 1'},    
project2: { message1: 'hello this message for project 2',message2: 'messsage 2 for project 2'}
};

但我得到的是产出

project1: { message1: 'hello this message for project 2',message2: 'messsage 2 for project 2'};
project2: { message1: 'hello this message for project 2',message2: 'messsage 2 for project 2'};

我希望项目1显示自己的消息，项目2显示自己的消息，但redux正在覆盖我的状态

  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { projectsFetchData } from '../actions/projects';
  import MessageList from './MessageList';

  class Projects extends Component {
      componentDidMount() {
        this.props.fetchData('https://api.proworkflow.net/projects?apikey=9ZVM-873H-3JPK-C55Q-PWFE7MN-TR86485');
      }
      render() {
          if (this.props.hasErrored) {
              return <p>Sorry! There was an error loading the items</p>;
          }
          if (this.props.isLoading) {
              return <p>Loading…</p>;
          }
          return (
            <div className="container">
              <div className="panel panel-primary">
                <div className="panel-heading clearfix">
                  <div className="header-logo pull-left" />
                  <div className="pull-right heading">
                    <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                    &nbsp;Project Messages
                  </div>
                 </div>
                <div className="panel-body secondry">
                  {this.props.projects.map((item) => (
                    <div className="media" key={item.id}>
                      <div className="media-body">
                        <h4 className="media-heading"><i>{item.companyname}</i></h4>
                        <p><i>{item.title}</i></p>
                        <MessageList projectId={item.id} />
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          );
      }
  }
  Projects.propTypes = {
      fetchData: PropTypes.func.isRequired,
      projects: PropTypes.array.isRequired,
      hasErrored: PropTypes.bool.isRequired,
      isLoading: PropTypes.bool.isRequired
  };

  const mapStateToProps = (state) => {
      return {
          projects: state.projects,
          hasErrored: state.projectsHasErrored,
          isLoading: state.projectsIsLoading
      };
  };

  const mapDispatchToProps = (dispatch) => {
      return {
          fetchData: (url) => dispatch(projectsFetchData(url))
      };
  };

  export default connect(mapStateToProps, mapDispatchToProps)(Projects);

---

这是因为两个项目共享相同的redux状态

我不确定添加名称空间是否会对您有所帮助，因为您的项目列表可能有任意数量的项目。然而，我认为它可能会给你一些解决共享状态问题的提示

---

您可以添加projectMessages减缩器，而不是使用消息减缩器

儿童减速机

    export function messagesHasErrored(state = false, action) {
        switch (action.type) {
            case 'MESSAGES_HAS_ERRORED':
                return action.hasErrored;
            default:
                return state;
        }
    }
    export function messagesIsLoading(state = false, action) {
        switch (action.type) {
            case 'MESSAGES_IS_LOADING':
                return action.isLoading;
            default:
                return state;
        }
    }
    export function messages(state = [], action) {
        switch (action.type) {
            case 'MESSAGES_FETCH_DATA_SUCCESS':
              return action.messages;
            default:
              return state;
        }
    }

export function projectMessages(state = {}, action) {
    switch (action.type) {
        case 'PROJECT_MESSAGES_FETCH_DATA_SUCCESS':
          return Object.Assign({}, state, {action.payload.projectId: action.payload.messages});
        default:
          return state;
    }
}

在行动上：

export function projectMessagesFetchDataSuccess(messages, projectId) {
    return {
        type: "PROJECT_MESSAGES_FETCH_DATA_SUCCESS",
        payload: { projectId: projectId, messages: message }
    };
}

In-MessageComponent：通过获取项目的消息

this.prop.projectMessages[this.props.projectId]

---

例如：

projectMessages = {"project1": ["m1", "m2", "m3"], "project2": ["m4", "m5", "m6"]};

如果您想获得project2的消息，可以这样做

var messagesOfProject2 = projectMessages["project2"];

---

设计中存在一些问题

在父组件中，您编写了

每当

项目

状态发生更改时，都会呈现该属性

在

MessageList

组件本身中，您使用的是state

messages:state.messages

每当

状态发生变化时，将要求组件重新渲染。消息

因此，通过这种方式，消息组件被渲染两次

解决方案：

在父组件中，删除要传递的特性

代替

写

从

projects:state.projects

语句中，

projects

是state的一部分

因此，在子组件（

MessageList

）中循环它

在子组件中，您的

MapStateStorops

将

const mapStateToProps = (state) => {
      return {
          messages: state.messages,// remove it
          hasErrored: state.messagesHasErrored,
          isLoading: state.messagesIsLoading,
          projects : state.projects //added in child component
      };
  };

从状态树中删除

messages:state.messages

，作为

MessageList

组件的唯一内部状态。您可以在内部存储它并循环它

在子组件中，在

componentDidMount() {
    let projectId = null;
    this.props.projects.map((item) =>{
        projectId = item.id;
            this.props.fetchData(`https://api.proworkflow.net/projects/${projectId}/messages?apikey=9ZVM-873H-3JPK-C55Q-PWFE7MN-TR86485`);

    }) 
  }

现在，只要父组件中的

项目

状态发生更改，

---

您的子组件（MessageList）将使用更新的项目id数据重新呈现。

但如何获取特定项目的消息。？请帮助我，但我如何才能得到特定项目的消息。？请帮帮我

componentDidMount() {
    let projectId = null;
    this.props.projects.map((item) =>{
        projectId = item.id;
            this.props.fetchData(`https://api.proworkflow.net/projects/${projectId}/messages?apikey=9ZVM-873H-3JPK-C55Q-PWFE7MN-TR86485`);

    }) 
  }