如何将 setState 设置为 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" 的组件，它为映射的每个线程呈现。在 "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,
    });
}

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

So, my question is, how can I deal with it in order to have the posts according to its thread but using the same component? If it's not posible, which is the best solution to do that?

我希望自己的解释足以理解我。

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

提前致谢。

Answer 1

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

你必须创建一个单独的变量来保存每个 API 调用的数据，当调用 API 时你必须像

一样传递密钥

举个例子

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

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

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

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

的数据时检查条件

假设我已经采用了一个变量，我在其中存储了 return 的数据 API like

现在你必须创建两种方法来根据键存储数据 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>
)
    }

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

How to setState to one particular component instance in RefluxJS?

reactjs

flux

reactjs-flux

refluxjs