同一页面中的多个组件相互影响，错误答案

【问题标题】：flux multiple components in same page are influenced with each other, bugs同一页面中的多个组件相互影响，错误
【发布时间】：2016-09-04 20:06:50
【问题描述】：

我在同一个页面中多次使用同一个组件，我刚刚意识到任何分派的事件都会被所有相同的组件拦截，并且所有组件都会一起更新。这是不可接受的，因为即使是同一个组件，如果它用于显示不同的数据，它们应该具有完全独立的行为。在一个组件中执行的操作不应该被另一个组件监听。我该如何解决这个错误？

【问题讨论】：

如果您能更清楚地解释您的设置和流程可能会有所帮助：在典型的 react-flux 设置中，<Component>s 不会拦截已调度的事件（只有商店会这样做）。 Stores 监听已调度的事件，并发出更改。 <Component>s 监听变化发射，可能从 Stores 获取数据，然后重新渲染。 <Component>s 不听其他<Component>s（只听商店，和用户互动）。

标签： reactjs flux

【解决方案1】：

你应该有一个容器组件，它将获取一个数据集合，它代表你正在重复的组件。一个操作将更改该数据集合，而不是重复的组件本身。换句话说，重复的组件不应该直接从存储中获取数据。

您可以在此处看到一个完整的 todomvc 示例，它在一个页面中多次呈现相同的“TodoItem”组件：TodoMVC example

例子：

var ButtonStore = require('../stores/ButtonStore');

function getButtonState() {
  return {
    allButtons: ButtonStore.getAll()      
  }
}

const Button = (props) => {
  return <button>{props.text}</button>
}

class ButtonList extends React.Component {
  constructor(props) {
    super(props)

    this.state = getButtonState()
  }

   render() {  
    return <div>
            {this.state.allButtons.map(button => <Button {...button} />)}
           </div>
  }
}

这是一个例子，只是没有商店：Component List Example

如果您发布一些代码示例，这可能会有所帮助。

【讨论】：