如何在setState中对一个特定的组件实例进行RefluxJS？

Question

我目前正在React + Flux (RefluxJS)中做一个小项目，我面临一个我无法解决的问题。如果你们能帮我个忙，我会非常感激的。

在这里，为了方便您的帮助，您可以使用整个项目的指向GitHub的链接，这是一个简单的版本，只是为了重现我所面临的问题。

我的疑问是，如何在同一视图中使用不同内容的一个组件。让我解释一下：

我有一个组件in，"components/threads.jsx"，概括地说，它提供了通过一个假API ("utils/api.jsx")：从商店("stores/thread-store.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>
        );

    });
},

正如yo所看到的，我在"components/thread-posts.jsx"中嵌套了另一个名为"Posts“的组件，它被映射为每个线程。在"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，我想在同一个页面上使用相同的组件两次，但是对于这两个组件，数据应该是不同的，我有一个MainComponent存储库，称为MainStore In 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返回的数据，类似

现在您必须创建两种方法来存储基于key var _data，_data1的数据。

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

    }

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

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

现在你的getintialState of MainComponent应该是

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