Javascript 与ReactJS&；回流

我是个新来的反应者，我正试着让自己的头脑清醒过来

以下是我的设想：

我目前有一个非常简单的应用程序，它从rest api调用一些歌曲数据，一旦检索到，它将存储在state.songs中（这发生在歌曲存储中的Init函数中）：

下面是呈现歌曲数据的组件：

var Home = React.createClass({

mixins: [Reflux.connect(SongStore, 'songs')],

render: function() {
  return (
    <div className={'react-app-home'}>
      <div className="float-left">
        <div className="song-data">
          {this.state.songs.map(function(song) {
            return <div><p>{song.lyrics}</p></div>
          })}
        </div>
      </div>
      <div className="float-right">
        <AlbumList />
      </div>
    </div>
  );
 }
});

有人能帮我吗？一个有一些解释的答案会很棒，这样我就能理解问题所在

---

谢谢

您应该对handleClick使用操作，或者组件对存储的任何其他调用。我还建议将api调用与应用商店分开。下面是React.14/ReFluxSuperAgent中的一个示例

app.js

“严格使用”；
从“React”导入React；
从“react dom”导入react dom；
从“./components/app.ctrl.js”导入AppCtrl；
从“/Actions/api.Actions”导入操作；
从“/stores/Api.Store”导入ApiStore；
window.ReactDom=ReactDom；
Actions.apinit（）；
render（，document.getElementById（'react'）1
getInitialState
应返回对象而不是数组。2.我看不出您应该在
onReload
函数或甚至
componentDidMount'中设置状态的位置。另外，您还需要在Function.prototype.map functionnAz内部绑定
this
，而不是“绑定”
null`谢谢您的回复。onReload函数中的这个.trigger（content）实际上是通过回流设置this.state.songs（mixins:[reflux.connect（SongStore，'songs'））在上面的主组件中）。@nAz你是说在我的onClick函数中吗？像这样：return
{album.album\u name}
是的，你在使用
map
函数的任何地方都会失去这个上下文，所以你必须
绑定（这个）
@nAz谢谢你的回复。我已经将它添加到绑定函数中，如果我在绑定之前将console.log记录下来，它会显示我期望的状态（this.state），但是一旦该函数在SongStore中运行，它就不再有状态了，你知道吗？
var Home = React.createClass({

mixins: [Reflux.connect(SongStore, 'songs')],

render: function() {
  return (
    <div className={'react-app-home'}>
      <div className="float-left">
        <div className="song-data">
          {this.state.songs.map(function(song) {
            return <div><p>{song.lyrics}</p></div>
          })}
        </div>
      </div>
      <div className="float-right">
        <AlbumList />
      </div>
    </div>
  );
 }
});

var AlbumList = React.createClass({
  mixins: [Reflux.connect(AlbumStore, 'albums'),        
  Reflux.connect(SongStore, 'songs')],
  render: function() {
    return (
      <div className="album-list">
        {this.state.albums.map(function(album) {
        return <p onClick={SongStore.onHandleClick.bind(null, album.album_link)}>{album.album_name}</p>
        })}
      </div>
    );
  }
});

var AlbumStore = Reflux.createStore({
  listenables: [AlbumActions],
  getInitialState: function() {
    return [];
  },

  onReload: function() {
    request('http://0.0.0.0:1337/api/albums', function(error, response, body) {
      if (!error && response.statusCode == 200) {
        var content = JSON.parse(body);
        this.trigger(content);
      }
    }.bind(this));
  },

  init: function() {
    this.onReload();
  }
});