Pourquoi dois-je actualiser la page manuellement après la suppression?

Vous n'avez aucun code qui supprime le circuit de la liste des circuits.

Quelque chose comme ça:

let this.state.circuits = this.state.circuits.filter((circuit) => {
    return circuit.id == circuitId
})

Je ne suis pas familier avec React alors peut-être cela nécessite quelques modifications.

Vous devez supprimer des éléments de l'état (si celui-ci est à l'état de réaction, alors supprimer de l'état de réaction. S'il est en redux, supprimer l'élément de l'état de redux)

Ou vous pouvez à nouveau récupérer tous les éléments du backend pendant que votre route index est de nouveau montée (dans componentDidMount ), mais comme les appels réseau sont plus lourds que la manipulation d'état. J'opterais pour une approche optimiste de la suppression des éléments de l'état (que ce soit react ou redux ou toute autre bibliothèque de gestion d'état que vous utilisez)

 handleDeleteCircuit = async (event) => {
   const circuitID = this.props.match.params.id;
   await axios.delete(`link-to-api`, this.state);
   const circuits = [...this.state.circuits]; 
   const index = array.indexOf(circuitID)
   //or remove element from the redux state
   if (index !== -1) {
     circuits.splice(index, 1);
     this.setState({circuits});
   }
    this.props.history.push('/');
    this.forceUpdate();
}

Si vous utilisez un magasin redux pour gérer les éléments de la CircuitList , une cause possible est que même si l'entrée est supprimée via un appel api, les données persistent dans le magasin redux, ce qui devra également être actualisé une fois l'entrée supprimée.

Ce que vous voyez dans le rendu est ce que vous avez dans votre état.

TL; DR Vous devez mettre à jour votre état.

Vous avez donc deux possibilités.

1. Mise à jour optimiste, lancez l'api de suppression sur le serveur + setState pour supprimer les données dans votre état. Et après avoir reçu la réponse de l'API de suppression, agissez en conséquence.

2. Après le feu, supprimez l'API, récupérez à nouveau toutes les données du serveur et mettez à jour l'état.

Je suggérerais l'option 1 car elle semble plus rapide pour l'utilisateur.

Voici un concept supplémentaire.

1. Si vous souhaitez partager l'état (données) avec votre page "CircuitList" et "CircuitDetail". Vous devez stocker les circuits dans certains parents, comme App (ou état Redux), puis les transmettre à chaque composant.

2. Encore une fois, le modèle de mise à jour optimiste. Fire API + setState immédiatement ... revenir en arrière si les choses tournent mal.

Faites-moi savoir si vous avez besoin d'aide supplémentaire :)

Voici ce que vous pouvez faire.

// assuming you have your data in App, state.circuits
class App extends React.Component {
  state = {
    circuits: [
      { id: 1, title: 'Circuit 1' },
      { id: 2, title: 'Circuit 2' },
      { id: 3, title: 'Circuit 3' },
    ],
  }

  afterDeleteCircuit = (circuitID) => {

    // state, before delete anything
    const currentCircuits = this.state.circuits;

    // Remove deleted item from state.
    this.setState({
      circuits: currentCircuits.filter(circuit => circuit.id !== circuitID),
    });

    // Fire delete API
    axios
      .delete(`link-to-api`, this.state)
      .then(response => {
        if (response.status === 'error') {
          // Oops, something went wrong. Let's get that deleted Id back.
          this.setState({
            circuits: currentCircuits,
          });

          // Show Error message here.
        } else {

          // Delete successfully, do nothing.
          // Because we already remove the deleted id from state.

          // Show success message here.


        }
      });
  }

  render() {
    return (
      <Router>
        <Route exact path='/' render={(props) => <CircuitList {...props} circuits={this.state.circuits} /> } />
        <Route path='/circuits/:id' render={(props) => <CircuitDetail {...props} onDelete={this.afterDeleteCircuit} /> } />

      </Router>
    );
  }
}


class CircuitList extends React.Component {

  render () {
    const { circuits } = this.props;
    return (
      <div>
        {circuits.map(circuit => (
           <li>{circuit.title} <Link to={`/circuit/${circuit.id}`}>Edit</Link></li>
        )}
      </div>
    );
  }
}


class CircuitDetail extends React.Component {

  handleDelete = (e) => {
    const { match, history } = this.props;
    const id = match.params.id;
    this.props.onDelete(id);

    history.push('/');
  }

  render () {
    return (
      <div>
        ...
        // Delete button
        <button onClick={this.handleDelete}>Delete</button>
      </div>
    );
  }

}

p>