@D_K_D
Чайник

На сайте отображаются всё количество введённых данные кроме последнего?

Всем добрый день в чём прикол не пойму . На сайте я ввожу данные которые отправляются бэкенду 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)))
}
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
@FireGM
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  : ""})
  }

Запросы асинхронные, GET запрос выполняется одновременно с POST. Но в это время POST запрос ещё не обработался, а значит данных нет. Используйте .then после запроса POST или какая есть альтернатива для цепочки последовательных запросов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 сент. 2020, в 11:26
17500 руб./за проект
19 сент. 2020, в 10:21
10000 руб./за проект
19 сент. 2020, в 09:27
1000 руб./в час