Question

我无法理解如何在两个页面之间传递信息？我使用react路由器，可以通过链接传递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

据我所知，我的州是无效的。但为什么呢？

更新

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

首先，正如我之前所说的，我有一个阵列数据＆＃39; 下一步 - 路由（通过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>
    );
    }
});

现在我只有一个来自数据的字符串，它与id匹配并被推入内部＆＃39; post＆＃39;阵列。之后，我想使用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#lifecycle-methods

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中创建逻辑。那么状态不应该为空。

尝试在render方法中使用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函数中，我的这个不是这个的反应。我通过将它存储在一个名为开头的变量（var that = this;）中来绕过这个问题。

Answer 2

最后，我为我的案子找到了一个解决方案。

首先，据我所知，在我的情况下，我使用Parent \ Child系统。因此，正如在docs中所说，我需要传递道具来传达亲子。所以我决定这样做：

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

在一个儿童组件中，我这样做了：

var SinglePost = React.createClass({
    getInitialState: function () {
        return {p: this.props.p};
    },
    function() {console.log('A');},
    render: function(){
        return(
            <div>
            { this.state.p.map(function (news) {
                    return (
                    <div className="col-lg-12 mrg" key={news.id}>
                        <h3 className="ui top attached header">
                            <a>{news.title}</a>
                            <div className="rght">
                                {news.date}
                            </div>
                        </h3>
                        <div className="ui green attached segment">
                            {news.text}
                        </div>
                    </div>)
                })
                }
            </div>
        );
    }
});

所以在底线我有一个包含所有信息的完整数组，我只使用了一个具有正确id的字符串，并将其作为从父到子的道具传递。我真的不确定代码。也许它过于复杂，我可以使用更方便的方式。但现在它有效。

谢谢，@ fuubah！

React setState为null

2 个答案: