Question

我已经使用node.js和PostgreSQL和react.js进行了系统身份验证。当用户具有对主页的访问权限时，他应该会看到我从数据库中查询到的一些信息，但是主页上什么也没有，并且我在控制台上看到此错误：

无法读取未定义的属性“用户名”

home组件中的代码

import React, { Component } from "react";
import axios from "axios";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: [],
            newquestion: ""
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(e) {
        //console.log(e.target.value)
        this.setState({
            newquestion: e.target.value
        });
    }

    handleSubmit() {
        axios
            .post("/questions", {
                question: this.state.newquestion
            })
            .then(function(response) {
                console.log(response);
            })
            .catch(function(error) {
                console.log(error);
            });
    }

    componentDidMount() {
        axios
            .get("/questions")
            .then(response => {
                const msg = response.data.msg;
                this.setState({ items: msg });
            })
            .catch(function(error) {
                console.log(error);
            });
    }

    render() {
        return (
            <div class="container">
                <div class="panel panel-default">
                    <input
                        type="text"
                        class="form-control"
                        placeholder="Add Question"
                        value={this.state.newquestion}
                        onChange={this.handleChange}
                    />

                    <button
                        type="submit"
                        class="btn btn-default"
                        onClick={this.handleSubmit}
                    >
                        Submit
                    </button>

                    <div class="panel-heading">
                        <span>
                            <b>{this.state.items[0].username}</b>
                        </span>
                        <br />
                        {this.state.items[0].question}
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>
                                <b>Admin</b>
                            </span>
                            <br />
                            {this.state.items[0].answer}
                        </p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Home;

还有来自后端的这段代码

router.get('/questions', (req, res, next) => {
  pool.connect(function (err, client, done) {
       if (err) {
           res.json({success:false, msg:"can not connect to the DB" + err})
       }
       client.query('SELECT * FROM questions', function (err, result) {
            done();
            if (err) {
                console.log(err);
                res.status(400).send(err);
            }
            res.json({success: true, msg: result.rows})
        })
   })
});

请问有人可以帮助我解决这个问题吗？

感谢和亲切问候。

Answer 1

您的items数组似乎为空。这可能是由于两个原因之一。＃1初始加载时，尚未从axios AJAX请求中加载项目，并且数组仍然为空，或者＃2您的数据库未返回/questions中的任何数据。

两种方法的解决方案相同。如果要使用items[0]语法，则需要对items进行长度检查，以确保它至少有1个问题，否则，您将尝试呈现不存在的数组项。

Answer 2

该组件将在安装后立即呈现，并且不会等到您收到/questions api调用的响应。收到响应后，组件的状态将被更新并再次呈现。

这就是为什么在执行此行时，items仍将是一个空数组。

<b>{this.state.items[0].username}</b>

仅当items数组具有值时，才可以有条件地渲染组件。

render() {
  if(!items.length) return null;

  // if not, proceed with your render login
  return (
    ...
  )
}

Answer 3

this.state.items在初始渲染时为空数组，因此this.state.items[0]未定义，从而导致错误。

您可以在初始状态声明中填充它：

this.state = {
  items: [{}],
  ...
}

或者，如果您仅使用第一项，为什么不更改API端点以返回单个对象作为结果而不是数组呢？然后在前端，您可以使用this.state = { item: {} }进行初始化，并通过this.state.item.username进行引用。

无法读取React中未定义的属性“用户名”

3 个答案: