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

Question

总结

我正在尝试使用 React 和 JSON 数据创建一个博客。

当我 console.log(this.state.blogs) 时，我收到以下输出:[object Object]、[object Object]、[object Object]。

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

我的 key 是“blog_text”，因为这是我将它编码回 React 的方式。

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

---

Google Chrome 控制台输出

---

React 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>
        );
    }
});

---

获取_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 数组替换 blogs 下的 div。在 blogEntry 组件中，您可以通过 this.props.blog 获取 blogEntryObject，在 render 方法中，您可以指定如何显示博客条目