Question

我是React的初学者，我正在尝试使用axios request从数据库中获取数据。我已经将res.data分配给了我的状态，但是当我尝试打印时，它是空的。我试图通过打印博客来发送警报消息，但是它是空的。当我在alert中传递JSON.stringify（res.data）时，它返回了我数据库的正确集合。

const express = require('express');
const app = express();
const cors = require("cors");
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const blog = require('./model/blog');
const routes = express.Router();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect("mongodb://127.0.0.1:27017/dummies");
const con = mongoose.connection;
con.on('open',(err,res)=>{
    console.log("Connected to the database");
});

routes.route('/').get((req,res)=>{
    blog.find((err,blog)=>{
        res.json(blog);
    })
});

routes.route('/add').post((req,res)=>{
    let b = new blog(req.body);
    b.save().then((err)=>{
        res.send("Saved");
    });
});

app.use('/',routes);

app.listen(3000,()=>{
    console.log("Connected on port 3000");
})

上面是server.js文件。

import React , {Component} from 'react';
import {Link} from 'react-router';
import Search from '../Search/Search';
import './Home.css';
import axios from 'axios';

const SingleBlog = (props)=>{
    return(
        <div>
            <p>{props.topic}</p>
        </div>
    )
}

class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            blogs:[]
        }
    }

    componentDidMount(){
        axios.get("http://localhost:3000/").then(res=>{
            this.setState=({
                blogs:res.data
            });
        })
       alert(this.state.blogs);

    }

    componentDidUpdate(){
        axios.get("http://localhost:3000/").then(res=>{
            this.setState=({
                blogs:res.data
            })
        })
    }

    render(){
        return(
            <div>
                <div className="banner">
                    <Search/>
                </div> 
                {this.state.blogs.map(blog=>{
                    return(
                        <div>
                            <p>{blog.topic}</p>
                        </div>
                    )
                })}
            </div>

        );
    }
}

export default Home;

这是我试图显示获取的值的组件

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const Blog = new Schema({

    topic:{
        type:String
    },
    desc:{
        type:String
    }

});

module.exports = mongoose.model("Blog",Blog);

这是我的数据库模型。

Answer 1

乍一看，问题似乎是您正在分配而不是致电setState。

此代码

this.setState=({
  blogs:res.data
})

应采用这种方式（请注意，我删除了=）

this.setState({
  blogs:res.data
})

尽管从res.data分配了值，但状态值仍为空

1 个答案: