Question

摘要

我试图使用带有JSON数据的React创建博客。

当我console.log(this.state.blogs)收到[object Object],[object Object],[object Object]的输出时。

我尝试过使用.map函数但不确定如何使用JSON数据。

我的关键是＆＃34; blog_text＆＃34;因为这就是我将它编码回React的方式。

到目前为止，我所能做的就是通过打印this.state.blogs[0]来访问对象数组中的不同项目。我不确定如何将点运算符或.map函数应用于此数组。我已经在Stack Overflow上进行了搜索，但它并不适用于我保存JSON的方式。有人有建议吗？提前谢谢。

<小时/> 谷歌Chrome控制台输出

<小时/> 反应LoginForm类

var LoginForm = React.createClass({
    getInitialState: function() {
        return {
            username: 'alexa',
            password: '1234',
            blogs: {}
        };
    },
    componentDidMount: function() {
        ajax('obtain_blogs.php', null, function(response) {
            if (response.result === 'error') {
                alert('Error: ' + response.msg);
            } else if (response.result === 'success') {
                console.log("success");
                console.log("Response.blogtext: " + response.blogtext);
                console.log("Response.blogtext[0]: " + response.blogtext[0]);
                this.setState({ blogs: response.blogtext, loading: false});
                //this.props.getBlogs(response.blogtext);
            } else {
                alert("Response message has no result attribute");
            }
        }.bind(this));
    },
    onUsernameChange: function(e) {
        this.setState({ username: e.target.value });
    },
    onPasswordChange: function(e) {
        this.setState({ password: e.target.value });
    },
    onSubmit: function(e) {
        ajax('login.php', {username: this.state.username, password: this.state.password },
        function(response) {
            if (response.result === 'failure') {
                alert('Bad username or password');
            }
            else if (response.result === 'success') {
                this.props.onLogin(response.counter);
            }
            else if (response.result === 'error') {
                alert('Error: ' + response.msg);
            }
            else {
                alert('Response message has no result attribute.');
            }
        }.bind(this));

    },
    render: function() {
        var blog_entries = this.state.blogs.toString();
        console.log("Blog Entries: " + blog_entries);
        var key = "blog_text";
        console.log("this.state.blogs typeof: " + typeof(this.state.blogs));

        return (
            <div>
                <h1>Single Blog System</h1>
                <hr></hr>
                Username: <input type="text"     onChange={this.onUsernameChange} value={this.state.username} /> <br></br>
                Password: <input type="password" onChange={this.onPasswordChange} value={this.state.password} /> <br></br>
                          <input type="submit"   onClick={this.onSubmit}          value="Login" /> <br></br>
                <hr></hr>
                <h2>Blogs:</h2>
                <div>
                    {this.state.blogs}
                </div>

            </div>
        );
    }
});

<小时/> 的 Obtain_Blogs.php

<?php
    # update_click will connect to the database and then update the counter 
    # variable to the database.

    # Global Declaration for all "try" blocks to have access.
    $servername = "************";
    $dbusername = "************";
    $dbpassword = "************";
    $dbname = "************";
    $tablename = "************";

    # Checks the connection with the database.
    try 
    {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $dbusername, $dbpassword);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql= "SELECT blog_text FROM users";
        $stmt = $conn->prepare($sql);
        $json=json_encode($stmt);
        $stmt->execute();

        if ($stmt->rowCount() == 0){
            $response = array('error' => 'Did not find blogs');
            print(json_encode($response));
            exit();
        }
        $row = $stmt->fetchAll(PDO::FETCH_ASSOC);

    } catch(PDOException $e)
    {
        $response = array('result' => 'error', 'msg' => $e->getMessage());
        print(json_encode($response));
        console.log("my error. message is %s", $e);
        exit();
    }
    $response = array('result' => 'success', 'blogtext' => $row);
    print(json_encode($response));
?>

Answer 1

我建议为博客条目创建一个单独的组件，然后执行以下操作。

this.blogComponents = this.state.blogs.map((blogEntryObject, index)=>{return <BlogEntry blog={blogEntryObject}>});

然后用blogComponents数组替换博客下的div。在blogEntry Component中，您可以通过this.props.blog获取blogEntryObject，在render方法中，您可以指定如何显示博客条目

Answer 2

试试这个！

<div>
    <h1>Single Blog System</h1>
        <hr></hr>
        ...
        <hr></hr>
        <h2>Blogs:</h2>
        <div>
            {
               this.state.blogs.map(ele => {
                   return ele.blog_text;
               }
            }
        </div>

</div>

如何在React渲染函数中从JSON对象获取值？

2 个答案: