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

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

你必须创建一个单独的变量，它可以保存每个API调用的数据，当调用API时，你必须传递密钥，如

让我们举一个例子

我有一个组件，它叫做MainComponent 我想在同一页面上使用相同的组件两次，但两个组件的数据应该不同我有一个名为MainStore的MainComponent商店在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接收数据时检查条件

假设我已经采用了一个变量，我在其中存储由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>
)
    }

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

1 个答案: