反应 setState 为空

Question

我无法理解如何在两个页面之间传递信息？我正在使用反应路由器，可以通过链接传递 id 并从数组中获取正确的字符串。看起来像这样：

//my array

var data = [
      {id: 1, title: "Breaking News #1", text: "This is one test new", date: "12.05.2015"},
      {id: 5, title: "Breaking News #2", text: "This is *another* test new", date: "03.05.2015"}
    ];

//my fetch function

componentDidMount: function() {
        var id = this.props.params.id;
        var dt = data;
        var post = [];
        for (var i=0; i<dt.length; i++){
            if (dt[i].id == id){
                post.push(dt[i]);
            };
        };
        this.setState({post : post});
    },

之后我尝试使用函数映射所有信息this.state.post.map(function (p) {并出现错误Uncaught TypeError: Cannot read property 'post' of null

据我了解，我的状态为空。但为什么？

更新：

当然，为了澄清我的问题，我想分享一些代码！

首先，正如我之前所说，我有一个数组“数据”。下一步 - 路由（通过 React Router）通过两个页面传递 id：

var routes = (
  <Route path="/" handler={NewsApp}>
    <DefaultRoute handler={NewsList}/>
    <Route name="id" path=":id" handler={SinglePostBox}/>
  </Route>
);

所以现在我有了带有数据和 id 的 SinglePostBox 组件。在这个组件中，我做接下来的事情：

var SinglePostBox = React.createClass({
    componentDidMount: function() {
        var id = this.props.params.id;
        var dt = data;
        for (var i=0; i<dt.length; i++){
            if (dt[i].id == id){
                post.push(dt[i]);
            };
        };
        this.setState({post : post});
        console.log(this.state);
    },
    render: function(){
    return(
    <div className="readiv">
        <SinglePost />
        <CommentBox />
    </div>
    );
    }
});

现在我只有一个来自 data 的字符串，它与 id 匹配并被推送到“post”数组中。之后我想使用 post 数组将这个字符串映射到不同的 div。但就我而言，我有 console.log(this.state) = null。

对不起，如果我犯了一个愚蠢的错误，我只是在第三天尝试使用 React。

Answer 1

我认为您需要创建一个inititalState。空的 {} 对象应该没问题。

可以看看https://facebook.github.io/react/docs/component-specs.html#component-specifications和https://facebook.github.io/react/docs/component-specs.html#生命周期方法

object getInitialState() 在安装组件之前调用一次。返回值将用作 this.state 的初始值。

我正在做这样的事情

var data = [
      {id: 1, title: "Breaking News #1", text: "This is one test new", date: "12.05.2015"},
      {id: 5, title: "Breaking News #2", text: "This is *another* test new", date: "03.05.2015"}
    ];

getInitialState() {
        return this.data;
},

然后在你的 componentDidMount 中创建你的逻辑。那么状态不应该为空。

尝试在您的渲染方法中使用 console.log(this.state) 。查看状态是否为空或只是您的帖子属性。

您应该查看 Flux 实现 ( https://github.com/voronianski/flux-comparison ) 并将您的状态存储在商店中，以便您可以从您的页面收听该商店。这样您就可以在页面之间共享数据。但作为旁注，我个人发现为每个页面拥有一个存储（和一个状态）更容易，其他信息通过属性传递。希望这可以帮助。

更新：

有时这不是你的反应组件。它是一个框架的对象，例如：

onFetchById(id) {
        var that = this;
        var url = '/user/' + id
        agent('GET', url).
            end().
            then(function onResult(res) {
                var result = JSON.parse(res.text);
                that.data = that.data.set('result', result);
                console.log(result);
                that.trigger(that.data);
            });
    },

在 then 函数中，我的this不是反应this。我通过将其存储在开头称为 that 的变量中来绕过该问题（var that = this;）。