Обновленная страница не перерисовывается с использованием `history.push` во вложенных маршрутах

Question

Я использую вложенный маршрут. Родительский компонент показывает список категорий, а дочерний компонент - модальный. При выполнении действия удаления в модальном, т.е. дочернем, я перенаправляю на родительский маршрут, используя history.push. Компонент визуализируется, но без повторного рендеринга компонента, то есть удаленная запись все еще отображается в представлении, но при обновлении страницы запись не отображается. Есть предложения по этому поводу?

Вот мой код -

CategoryList.js

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import CustomisedModal from './../../elements/CustomisedModal';
class CategoryList extends Component {
  state = {
    categories: [],

  }
  componentDidMount() {
    fetch('http://localhost:8080/xxxx')
      .then(results => {
        return results.json();
      }).then(data => {
        this.setState({ categories: data.categories });
      })
      .catch(error => {
        this.setState({ error: true });
      });
  }

  deleteCategoryHandler = (id) => {
    **//navigate to modal**
    this.props.history.replace('/category/delete/' + id);
  }
  render() {

    if (!this.state.error) {
      categories = this.state.categories.map(category => {
        return (
         xxxxx
        )
      })
    }
    return (
      <Container>
        xxxx
        <Route path="/category/delete/:id" exact component={DeleteCategory} />      **<!--Nested route-->**

      </Container>
    );
  }
}
export default CategoryList;

CustomisedModal.js

import React from 'react'
import { Button, Header, Modal, Icon } from 'semantic-ui-react';

class CustomisedModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: this.props.props
    }
  }

  onClose = () => {
    this.props.props.history.go('/category');
  }
  deleteCategory = () => {
    fetch('http://localhost:8080/xxxx/' + this.props.props.match.params.id , {
      method: 'delete'

    })
      .then(results => {
        return results.json();
      }).then(data => {
        **//Redirect to parent route**
        this.props.props.history.go('/category');

      })
      .catch(error => {
        this.setState({ error: true });
      });


  }
  render() {

    return (
      <Modal> xxxx
      </Modal>
    )
  }
}
export default CustomisedModal;

Answer 1

Исправлена ​​проблема путем обновления состояния при получении ответа, чтобы компонент повторно отображался

CustomisedModal.js

import React from 'react'
import { Button, Header, Modal, Icon } from 'semantic-ui-react';

class CustomisedModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       categories: this.props.props.categories **added categories to state**
    }
  }

  onClose = () => {
    this.props.props.history.go('/category');
  }
   removeByAttr = function (arr, attr, value) {
    var i = arr.length;
    while (i--) {
      if (arr[i]
        && arr[i].hasOwnProperty(attr)
        && (arguments.length > 2 && arr[i][attr] === value)) {

        arr.splice(i, 1);

      }
    }
    return arr;
  }

  deleteCategory = () => {
    fetch('http://localhost:8080/xxxx/' + this.props.props.match.params.id , {
      method: 'delete'

    })
      .then(results => {
        return results.json();
      }).then(data => {
        **//Redirect to parent route**
        let newArray = this.removeByAttr(this.state.categories, 'id', data.id);
        this.setState({ categories: newArray }); **//updated setState**
        this.props.props.history.go('/category');

      })
      .catch(error => {
        this.setState({ error: true });
      });


  }
  render() {

    return (
      <Modal> xxxx
      </Modal>
    )
  }
}
export default withRouter(CustomisedModal);**// added withRouter**

Answer 2

проблема здесь в том, что ваш родительский компонент имеет вызов fetch в componentDidMount. используйте componentWillReceiveProps с некоторым условием для перезагрузки данных после действия удаления. В качестве текущего родительского состояния хранятся старые данные.

Надеюсь, это поможет