如何在 RefluxJS 中将状态设置为一个特定的组件实例？

Question

我目前正在 React + Flux (RefluxJS) 中做一个小项目，但遇到了一个我无法解决的问题。如果你们当中有人能帮我一把，我将不胜感激。

这里有整个项目的the link to GitHub，以便于您的帮助，这是一个最简单的版本，只是为了重现我遇到的问题。

我的疑问是，我怎样才能在同一个视图中使用具有不同内容的一个组件。让我解释一下：

我有一个组件，“components/threads.jsx”，总而言之，它可以让代码从存储中获取数据（“stores/thread-store.jsx”） ) 通过伪造的 API ("utils/api.jsx")：

renderThreads: function() { 
    return this.state.thread_content.map(function(thread, i) {  
        return (
            <div key={thread.id}>
                <div className="row">
                    <div className="col-md-10">
                        <a data-toggle="collapse" href={'#thread-' + thread.id} className="faq-question">{thread.name}</a>: <small>{thread.content}</small>
                    </div>              

                </div>
                <div className="row">
                    <div className="col-lg-12">
                        <div id={'thread-' + thread.id} className="panel-collapse collapse ">
                            <Posts id={thread.id} />
                        </div>
                    </div>
                </div>
            </div>
        );

    });
},

如您所见，我在 "components/thread-posts.jsx" 中嵌套了另一个名为“Posts”的组件，它为每个映射的线程呈现。在“帖子”组件中，我有这样的代码：

module.exports = React.createClass({
mixins: [
    Reflux.listenTo(PostsStore, 'onChange'),
],
getInitialState: function() {
    return {
        posts: []
    }
},
componentDidMount: function() {
    Actions.getPosts(this.props.id);
},
render: function() {    
    return (
        <div>
            {this.renderPosts()}
        </div>
    );
},
renderPosts: function() {
    if(this.state.posts.comments != undefined){
        return this.state.posts.comments.map(function(post, i) {
            return(                             
                <div key={i} className="faq-answer">
                    <p>             
                    {post.content}
                    </p>
                </div>
            );
        });
    }
},
onChange: function(event, posts) {
    this.setState({
        posts: posts,
    });
}

问题来了。完成渲染后，所有线程都有相同的帖子，特别是最后的帖子。我认为与状态有关，如果它们发生变化，所有渲染的组件都会发生变化。

所以，我的问题是，我该如何处理它以便根据其主题发布帖子但使用相同的组件？如果不可行，最好的解决方案是什么？

我希望能解释我自己，也足以理解我。

如果您能帮我解决这个问题，我将不胜感激。

提前致谢。

Answer 1

是的，如果您与您的视图共享商店，那么最新的将覆盖您之前的组件数据

您必须创建一个单独的变量来保存每个 API 调用的数据，并且在调用 API 时您必须像传递密钥一样

举个例子

我有一个名为 MainComponent 的组件 我想在同一页面上使用相同的组件两次，但两个组件的数据应该不同 我有一个名为 MainStore 的 MainComponent 商店 在 MainStore 我有一个名为 getData 的方法，例如

getData:function(key)
{
 //API Call
}

现在我从我的 MainComponent 从 componentDidMount 事件中调用此方法，例如

componentDidMount:function()
{
  //if you used Action then you have to called like 
   MainComponentAction.getData(this.props.Key);
  // if you directly called 
  MainComponentStore.getData(this.props.Key);
}

这里 this.props.Key 你必须从父组件传递，应该是 1 或 2

现在来存储我们已经传递了密钥，所以现在我们必须在从 API 接收数据时检查条件

假设我使用了一个变量来存储由 API 返回的数据，例如

现在您必须创建两种方法来根据键存储数据 var _data,_data1

function loaddata(APIdata,key)
    {
     if(key===1)
       {
         _data=APIdata
        }
    else
     {
       _data1=APIdata
     }

    }

在您的商店中，您可以使用获取数据的方法，例如

getData:function()
{
return _data;
},
getData1:function()
{
return _data1;
}

现在你的 MainComponent 的 getintialState 应该是

getintialState:function()
{
return{
   Data:JSON.Parse(MainComponentStore.getData()),
   Data1:JSON.Parse(MainComponentStore.getData1()),
  }
}

你的 MainComponent 渲染函数应该是

 render:function(){
    var LatestData;
    if(this.props.Key===1)
    {
    LatestData=this.state.Data
    }
    else if(this.props.Key===2)
    {
    LatestData=this.state.Data1
    }
return(
  <div>
   {LatestData}
  </div>
)
    }