Имейте React Component с автоматическим обновлением UL при публикации новых данных с помощью Ax ios Request - PullRequest
Новая
       6

Имейте React Component с автоматическим обновлением UL при публикации новых данных с помощью Ax ios Request

0 голосов
/ 23 февраля 2020

У меня проблемы с пониманием того, как следующий компонент списка автоматически перерисовывается, когда я публикую новые данные, используя запрос Ax ios Post. Я могу видеть новый обновленный список, когда я обновляю sh страницу, но я хотел бы, чтобы он отображался автоматически. 

import React from "react";
import axios from "axios";

export default class TeamList extends React.Component {
    state = {
        teams: [],
    };

    componentDidMount() {
        axios.get('http://localhost:8080/teams')
            .then(res => {
           const teams= res.data;
            this.setState({teams});
});
    }

    render() {
        return (
            <ul>
            {this.state.teams.map(team => (
                <li key = {team.id}>Name: {team.name} Seeding: {team.seeding}</li>
            ))}
        </ul>
    );
    }
}

import axios from 'axios';


export default class TeamInput extends React.Component {
     noTeams=1;
    state = {
        name: '',
        id: 1,
        seeding: '10'
    };



    handleName = event => {
        this.setState({ name: event.target.value });
       // this.setState({id: this.noTeams});


    };

    handleSeeding = event =>{
        this.setState({seeding: event.target.value});
    };

    handleSubmit = event => {
        event.preventDefault();
        this.noTeams=this.noTeams+1;
        this.setState({id: this.noTeams});
        const team = {
            name: this.state.name,
            seeding: this.state.seeding,
            id: this.state.id,
        };

        axios.post(`http://localhost:8080/teams`,  team )
            .then(res => {
                console.log(res);
                console.log(res.data);
            });



    };

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Team Name:
                        <input type="text" name="name" onChange={this.handleName} />
                    </label>
                    <label> Seeding:
                        <input type = "text" name= "seeding" onChange={this.handleSeeding} />
                    </label>
                    <button type="submit">Add</button>
                </form>

            </div>
        )
    }
}

Ax ios извлекает данные из простого REST API у меня работает локально с использованием Spring. Я знаю, что React должен автоматически перерисовать список при изменении его состояния, но я новичок в ReactJS и мне трудно реализовать изменение состояния в моем коде.

...