Javascript 使用更新的更改重新渲染组件

我有一个Home组件，它从数据库中获取数据并显示出来

import React, {Component} from 'react';
import { Jumbotron,Modal,Button,ModalHeader,ModalBody,
Form,FormGroup,Input,Label} from 'reactstrap';
import { Card, CardTitle, CardText, Row, Col } from 'reactstrap';
import {   CardHeader, CardFooter, CardBody } from 'reactstrap';
import axios from 'axios';
import BlogAddForm from './BlogAddForm';
import NavbarComponent from './NavbarComponent';

 class HomeComponent extends Component{
 constructor(){
 super();
 this.state={
  isSignupModalOpen:false,
  isLoginModalOpen:false,
  isblogOpen:false,
  blogs:[]
  }

this.toggleSignupModal=this.toggleSignupModal.bind(this);
this.toggleLoginModal=this.toggleLoginModal.bind(this);
this.toggleblogModal=this.toggleblogModal.bind(this);

 }

componentDidMount() {
console.log("component did mount");
axios.get('http://localhost:3000/')
.then(response => {
  if (response.data.length > 0) {
    this.setState({ 
      blogs: response.data
    });
  }
 })
 .catch((error) => {
  console.log(error);
})


}




 toggleSignupModal(){
  this.setState({
  isSignupModalOpen:!this.state.isSignupModalOpen
  })
  }

  toggleLoginModal(){
  this.setState({
  isLoginModalOpen:!this.state.isLoginModalOpen
  })
  }

 toggleblogModal(){
 this.setState({
  isblogOpen:!this.state.isblogOpen
  })
 }


  render(){
   console.log("inside render ");

  var b=this.state.blogs.map((blog)=>{
    console.log(blog);
     var taggu=blog.tags.map((tag)=>{
      return(
        <span>#{tag}</span>
      )
      });
    var con=blog.content.slice(0,100);
    return(
      <Col className="my-1" lg="4" sm="6" >
      <Card key={blog._id}>
          <CardHeader tag="h3">{blog.topic}</CardHeader>
          <CardBody>
            <CardTitle tag="h5">By {blog.writer.username}</CardTitle>
            <CardText>{con}... </CardText>
            <Button>Learn More</Button>
          </CardBody>
          <CardFooter>{taggu}</CardFooter>
        </Card>
      </Col>
     )
  });


   return (
  
    <div className="App">
  
    <NavbarComponent />
    <Jumbotron>
      <h1 className="display-5">WELCOME TO BLOGERA</h1>
      <p className="lead">This is a simple blog site where you can put your thoughts into words and 
       interact with people.</p>
      <p className="my-2">
        <Button color="success" onClick={this.toggleblogModal}>Add Blog</Button>
      </p>
    </Jumbotron>
    {b}
    <Modal isOpen={this.state.isLoginModalOpen} toggle={this.toggleLoginModal}>
                <ModalHeader  toggle={this.toggleLoginModal}>Login</ModalHeader>
                <ModalBody>
                    <Form onSubmit={this.handleLogin}>
                        <FormGroup>
                            <Label htmlFor="username">Username</Label>
                            <Input type="text" id="username" name="username" innerRef= 
                   {(input)=>this.username=input}/>
                        </FormGroup>
                        <FormGroup>
                            <Label htmlFor="password">Password</Label>
                            <Input type="password" id="password" name="password" innerRef= 
                    {(input)=>this.password=input} />
                        </FormGroup>
                        <FormGroup check>
                            <Label check>
                                <Input type="checkbox" name="remember" innerRef= 
                    {(input)=>this.remember=input}/>
                                Remember me
                            </Label>
                        </FormGroup>
                        <Button type="submit" value="submit" color="primary">Login</Button>
                    </Form>
                </ModalBody>
            </Modal>

    <Modal isOpen={this.state.isSignupModalOpen} toggle={this.toggleSignupModal}>
                <ModalHeader  toggle={this.toggleSignupModal}>Signup</ModalHeader>
                <ModalBody>
                    <Form onSubmit={this.handleLogin}>
                        <FormGroup>
                            <Label htmlFor="username">Username</Label>
                            <Input type="text" id="username" name="username" innerRef= 
                     {(input)=>this.username=input}/>
                        </FormGroup>
                        <FormGroup>
                            <Label htmlFor="password">Password</Label>
                            <Input type="password" id="password" name="password" innerRef= 
                       {(input)=>this.password=input} />
                        </FormGroup>
                        <FormGroup check>
                            <Label check>
                                <Input type="checkbox" name="remember" innerRef= 
                             {(input)=>this.remember=input}/>
                                Remember me
                            </Label>
                        </FormGroup>
                        <Button type="submit" value="submit" color="primary">Signup</Button>
                    </Form>
                </ModalBody>
            </Modal>


    <Modal isOpen={this.state.isblogOpen} toggle={this.toggleblogModal}>
                <ModalHeader  toggle={this.toggleblogModal}>Write Blog</ModalHeader>
                <ModalBody>
                    <BlogAddForm toggleblogModal={this.toggleblogModal} />
                </ModalBody>
            </Modal>

   

    <Row>
     <Col className="my-1" lg="4" sm="6" >
    <Card>
    <CardHeader tag="h3">Header</CardHeader>
    <CardBody>
      <CardTitle tag="h5">Special Title Treatment</CardTitle>
      <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
      <Button>Learn More</Button>
    </CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
   </Col>

  <Col className="my-1" lg="4" sm="6" >
  <Card>
    <CardHeader tag="h3">Featured</CardHeader>
    <CardBody>
      <CardTitle tag="h5">Special Title Treatment</CardTitle>
      <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
      <Button>Learn More</Button>
    </CardBody>
    <CardFooter className="text-muted">Footer</CardFooter>
  </Card>
  </Col>

  <Col className="my-1" lg="4" sm="6" >
  <Card>
    <CardHeader tag="h3">Featured</CardHeader>
    <CardBody>
      <CardTitle tag="h5">Special Title Treatment</CardTitle>
      <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
      <Button>Learn More</Button>
    </CardBody>
    <CardFooter className="text-muted">Footer</CardFooter>
  </Card>
  </Col>

</Row>

  
</div>
 );
  }
  }


 export default HomeComponent;

import React，{Component}来自'React'；
导入{Jumbotron，Modal，Button，ModalHeader，ModalBody，
来自“reactstrap”的表单、表单组、输入、标签}；
从“reactstrap”导入{Card，CardTitle，CardText，Row，Col}；
从“reactstrap”导入{CardHeader、CardFooter、CardBody}；
从“axios”导入axios；
从“/BlogAddForm”导入BlogAddForm；
从“./NavbarComponent”导入NavbarComponent；
类HomeComponent扩展组件{
构造函数（）{
超级（）；
这个州={
isSignupModalOpen:错误，
isLoginModalOpen:错误，
isblogOpen:false，
博客：[]
}
this.toggleSignupModal=this.toggleSignupModal.bind（this）；
this.toggleLoginModal=this.toggleLoginModal.bind（this）；
this.toggleblogModal=this.toggleblogModal.bind（this）；
}
componentDidMount（）{
log（“组件未安装”）；
axios.get（）http://localhost:3000/')
。然后（响应=>{
如果（response.data.length>0）{
这个.setState（{
博客：response.data
});
}
})
.catch（（错误）=>{
console.log（错误）；
})
}
toggleSignupModal（）{
这是我的国家({
isSignupModalOpen:！this.state.isSignupModalOpen
})
}
toggleLoginModal（）{
这是我的国家({
isLoginModalOpen:！this.state.isLoginModalOpen
})
}
toggleblogModal（）{
这是我的国家({
isblogOpen:！this.state.isblogOpen
})
}
render（）{
控制台日志（“内部渲染”）；
var b=this.state.blogs.map（（blog）=>{
日志（blog）；
var taggu=blog.tags.map（（tag）=>{
返回(
#{tag}
)
});
var con=blog.content.slice（0100）；
返回(
{blog.topic}
通过{blog.writer.username}
{con}。。。
了解更多
{taggu}
)
});
返回(
欢迎来到BLOGERA
这是一个简单的博客网站，您可以将您的想法用文字和文字表达出来
与人互动

添加博客

{b}
登录
用户名
this.username=input}/>
密码
this.password=input}/>
this.memory=input}/>
记得我吗
登录
报名
用户名
this.username=input}/>
密码
this.password=input}/>
this.memory=input}/>
记得我吗
报名
写博客
标题
特殊头衔待遇
以下面的支持文本作为附加内容的自然引入。
了解更多
页脚
作为特色的
特殊头衔待遇
以下面的支持文本作为附加内容的自然引入。
了解更多
页脚
作为特色的
特殊头衔待遇
以下面的支持文本作为附加内容的自然引入。
了解更多
页脚
);
}
}
导出默认HomeComponent；

BLOGADDFORM是一个在后端获取数据并发送post请求的组件。我希望随着数据库的更新，我的homecomponent应该用更新的数据重新呈现。我尝试重定向到我的主页组件，但这并不能解决问题。 这是我的博客添加表单组件

 import React, {Component} from 'react';
 import { Button,Form,FormGroup,Input,Label} from 'reactstrap';
 import  { Redirect } from 'react-router-dom';
 import axios from 'axios';


 class BlogAddForm extends Component{
  constructor(){
  super();
  this.state = {
    input: {},
    errors: {}
  };

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

  handleChange(event) {
    let input = this.state.input;
    input[event.target.name] = event.target.value;
  
    this.setState({
      input:input
    });
   }

  handleSubmit(event) {
    event.preventDefault();
  
    if(this.validate()){
        console.log(this.state);
        axios.post("http://localhost:3000/nb", {
             params:{
                 data:this.state.input
             }
        }).then((res)=>{
          let input = {};
        input["topic"] = "";
        input["content"] = "";
        input["tag"] = "";

        this.setState({input:input});
  
        alert('Blog Added');
        this.props.toggleblogModal();
        <Redirect to='/' />
        }).catch((err)=>{
          console.log(err);
        })
        
    }
   }

    validate(){
    let input = this.state.input;
    let errors = {};
    let isValid = true;

    if (!input["topic"]) {
      isValid = false;
      errors["topic"] = "Please enter the topic of blog.";
    }

    if (!input["content"]) {
      isValid = false;
      errors["content"] = "Please write some content.";
    }



    if (!input["tag"]) {
      isValid = false;
      errors["tag"] = "Please enter tags related to this blog.";
    }

    this.setState({
      errors: errors
    });

    return isValid;
    }
     render(){
    return(
        <Form onSubmit={this.handleSubmit}>
        <FormGroup>
        <Label htmlFor="topic">Topic</Label>
            <Input type="text" id="topic" name="topic"  
            value={this.state.input.topic}
          onChange={this.handleChange}
          />
          <div className="text-danger">{this.state.errors.topic}</div>
        </FormGroup>
        <FormGroup>
            <Label htmlFor="content">Content</Label>
            <Input type="textarea" id="content" name="content" rows={8} 
             value={this.state.input.content}
             onChange={this.handleChange}
             />
             <div className="text-danger">{this.state.errors.content}</div>
        </FormGroup>
        <FormGroup>
            <Label htmlFor="tag">Tags</Label>
            <Input type="text" id="tag" name="tag" 
             value={this.state.input.tag}
            onChange={this.handleChange}
             />
            <div className="text-danger">{this.state.errors.tag}</div>
        </FormGroup>
    
        <Button type="submit" value="submit" color="primary">Submit</Button>
    </Form>
    )
    }
     }
      export default BlogAddForm;

import React，{Component}来自'React'；
从“reactstrap”导入{按钮、表单、表单组、输入、标签}；
从'react router dom'导入{Redirect}；
从“axios”导入axios；
类BlogAddForm扩展组件{
构造函数（）{
超级（）；
此.state={
输入：{}，
错误：{}
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
让输入=this.state.input；
输入[event.target.name]=event.target.value；
这是我的国家({
输入：输入
});
}
handleSubmit（事件）{
event.preventDefault（）；
if（this.validate（））{
console.log（this.state）；
axios.post（“http://localhost:3000/nb", {
参数：{
数据：this.state.input
}
})。然后（（res）=>{
让输入={}；
输入[“主题”]=“”；
输入[“内容”]=“”；
输入[“标记”]=“”；
this.setState（{input:input}）；
警报（“添加博客”）；
this.props.toggleblogModal（）；
}).catch（（错误）=>{
控制台日志（err）；
})
}
}
验证（）{
让输入=this.state.input；
让错误={}；
让isValid=true；
如果（！输入[“主题”]）{
isValid=false；
错误[“主题”]=“请输入博客的主题。”；
}
如果（！输入[“内容”]）{
isValid=false；
错误[“内容”]=“请写一些内容。”；
}
如果（！输入[“标记”]）{
isValid=false；
错误[“标记”]=“请输入与此博客相关的标记。”；
}
这是我的国家({
错误：错误
});
返回有效；
}
提供