Question

我正在使用嵌套路线。父组件显示类别列表，子组件显示模态。在modal即child中执行删除操作时，我使用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

这里的问题是你的父组件在componentDidMount中有fetch调用。使用componentWillReceiveProps一些条件在删除操作后重新加载数据。由于当前父状态持有旧数据。

希望这会有所帮助

Answer 2

通过更新接收响应的状态来修复问题，以便重新呈现组件

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**

在嵌套路由中使用`history.push`重新呈现更新的页面

2 个答案: