Всем добрый день в чём прикол не пойму . На сайте я ввожу данные которые отправляются бэкенду POST. В базу данных всё нормально записывается. Через Postman проверил запрос GET бэкенд туда все данные хранящиеся в базе данных записывает. Но при получение данных через GET во фронтенде возникает баг , например если я ввожу первый раз имя и фамилию в базу данных то в console.log() отображается пустой массив , если я ввожу два раза то в console.log() показывает тот массив который я ввёл до этого если три раза то первые два массива. Возможно вопрос не понятен легче показать это через видио с экрана. Кому интересно могу отправить видио. Мой ник в тг @Daniil_Krasnov . Ответ по теме обязательно отмечу решением. Заранее спасибо.
Вот фронтенд:
import React, { Component } from "react";
import { NavLink, Link, Route, Switch, Redirect, withRouter } from 'react-router-dom'
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
class Fighters extends Component {
constructor(props) {
super(props);
this.state = {
first_name: "",
last_name: "",
names:[]
};
this.newFighterFirstname = this.newFighterFirstname.bind(this);
this.newFighterLastname = this.newFighterLastname.bind(this);
this.saveName = this.saveName.bind(this);
}
newFighterFirstname(event) {
this.setState({first_name : event.target.value})
}
newFighterLastname(event) {
this.setState({last_name : event.target.value})
}
saveName(event) {
event.preventDefault();
axios(`http://localhost:8000/post`, {
method: "post", data: {
first_name: this.state.first_name ,
last_name: this.state.last_name
}
})
axios.get('http://localhost:8000/get')
.then(rest => {
console.log(res.data) //вот про этот console.log() я говорю
this.setState({ names : res.data});
})
this.setState({first_name : ""})
this.setState({last_name : ""})
}
render() {
const fullname = this.state.names;
const name = fullname.map((name,index) =>
<div className="card mt-2">
<div className="card-body">
<div key={index} className="btn-group mb-3 " >
Боец: {name.first_name} {name.last_name}
</div>
</div>
</div>
)
return (
<div className="container">
<div className="row">
<form>
<div className="form-row">
<div className="form-group col-md-4">
<input type="text"
className="form-control"
placeholder="Имя"
value={this.state.first_name}
onChange={this.newFighterFirstname} />
</div>
<div className="form-group col-md-4">
<input type="text"
className="form-control"
placeholder="Фамилия"
value={this.state.last_name}
onChange={this.newFighterLastname} />
</div>
<div className="btn-group ml-4 " >
<button className="btn mr-3 btn-secondary" onClick={this.saveName}>Сохранить</button>
</div>
</div>
</form>
<div>
{name}
</div>
</div>
</div>
);
}
}
export default Fighters;
Вот бэкенд:
import (
"log"
"net/http"
"fmt"
"encoding/json"
"io/ioutil"
"database/sql"
"github.com/gorilla/handlers"
"github.com/gorilla/mux"
_ "github.com/lib/pq"
)
type Names struct {
FirstName string `json:"first_name"`
LastName string `json:"last_name"`
}
type Fighter struct {
FirstName string `json:"first_name"`
LastName string `json:"last_name"`
}
func postName(w http.ResponseWriter,r *http.Request){
b, err := ioutil.ReadAll(r.Body)
if err != nil {
// check err
}
var n Names
if err := json.Unmarshal(b, &n); err != nil {
// check err
}
res, err := json.Marshal(n)
if err != nil {
// check err
}
w.Header().Set("content-type", "application/json")
w.Write(res)
connStr := "user=dan password=1111 dbname=testdb sslmode=disable"
db, err := sql.Open("postgres", connStr)
result, err := db.Exec("insert into judges(first_name , last_name) values ($1, $2);", n.FirstName, n.LastName)
fmt.Println(result.RowsAffected()) // количество добавленных строк
log.Printf("FirstName: %v , LastName: %v \n", n.FirstName, n.LastName) // выводит отправленные данные
}
func getName(w http.ResponseWriter,r *http.Request){
connStr := "user=dan password=1111 dbname=testdb sslmode=disable"
db, err := sql.Open("postgres", connStr)
rows, err := db.Query("SELECT * FROM judges")
if err != nil {
}
defer rows.Close()
var fighters = make([]Fighter, 0)
for rows.Next() {
var p Fighter
err := rows.Scan(&p.FirstName, &p.LastName)
if err != nil {
}
fighters = append(fighters, p)
}
json.NewEncoder(w).Encode(fighters)
w.Header().Set("Content-Type", "application/json")
}
func main() {
fmt.Println("Start")
router := mux.NewRouter()
router.HandleFunc("/post",postName).Methods("POST")
router.HandleFunc("/get",getName).Methods("GET")
fmt.Println("Listen and Server")
headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type", "Authorization"})
originsOk := handlers.AllowedOrigins([]string{"http://localhost:8080", "http://localhost:8081", "http://localhost:3000"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "PATCH", "OPTIONS", "DELETE"})
credentialsOk := handlers.AllowCredentials()
log.Fatal(http.ListenAndServe(":8000" , handlers.CORS(headersOk, originsOk, methodsOk, credentialsOk)(router)))
}
Простой
