Как установитьState для одного экземпляра компонента в RefluxJS?

Question

Я в настоящее время делаю один небольшой проект в React + Flux (RefluxJS), и я столкнулся с остроумием один вопрос, который я не могу решить. Я был бы очень благодарен, если бы кто-то из вас мог дать мне руку.

Здесь у вас есть the link to GitHub со всем проектом, чтобы облегчить вам помощь, это простейшая версия, чтобы воспроизвести проблему, с которой я столкнулся.

Мое сомнение в том, как я могу использовать один компонент в одном представлении с различным контентом. Поясню:

я на компоненте в, «компоненты/threads.jsx», которые в итоге сделать этот мир кода получать данные из хранилища («магазины/токарно-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> 
     ); 

    }); 
}, 

Как лет можно видеть, я еще один компонент, вложенных под названием "сообщения" в "компоненты/токарно-posts.jsx" который отображается для каждого потока. В компоненте «Сообщения» у меня есть этот код:

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 называется MainStor е В 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 как

теперь вы должны создать два способа хранения данных на основе ключ вара _DATA, _data1

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

    } 

и в вашем вами магазин для методы для получения данных, как

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

теперь ваш getintialState из 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> 
) 
    }