时间戳

首页 > 解决方案 > 一旦使用组件在反应类中更改状态或数据后如何重新加载页面

javascript - 一旦使用组件在反应类中更改状态或数据后如何重新加载页面

问题描述

在我的反应应用程序中，我调用了我的路由器，它检索了我的 mongo db 中的所有动物，然后我根据动物最喜欢的状态对其进行过滤。我正在将这些数据加载到一个名为动物的列表中，该列表存储在类的状态中。我在每只动物的每张卡片上都有一些按钮，它们可以改变动物状态的状态（修改者在反应应用程序中设置，状态设置为我的快速路线中的收藏夹）并且可能会将它们从动物列表中删除显示。但是，当此状态发生更改时，此动物列表不会像我预期的那样自动更新（一旦将动物更改为收藏，我就不想在非收藏列表中看到它）。

我遇到问题的组件的代码：

export default class AnimalListing extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      animals: null,
      update: '',
    };
  }

  starAnimal = async (values) => {
    var moddedby = sessionStorage.getItem('username');
    const data = {
      modified_by: moddedby,
    };

    fetch(`http://localhost:4000/assign/animal/starred/${values}`, {
      method: 'PUT',
      body: JSON.stringify(data),
    }).then((res) => {
      console.log('success');
    });
  };

  componentDidMount() {
    axios.get(`http://localhost:4000/animals`, {}).then((animal) => {
      this.setState({ animals: animal.data });
    });
  }

  render() {
    var Nonfavourite;
    Nonfavourite = this.state.tickets
      .filter((ticket) => animal.status === 'Non-favourite')
      .map((ticket) => (
        <div class="card-columns">
          <div class="card bg-light">
            <div class="card-body text-center">
              <h4 class="animal">{animal.name}</h4>
              <p>{animal.information}</p>
              <p>{animal.status}</p>

              <Button
                variant="primary"
                type="button"
                onClick={() => this.starAnimal(animal._id)}
              >
                Favourite this animal
              </Button>
            </div>
          </div>
        </div>
      ));

    return (
      <div>
        <h4>Animals</h4>
        {Nonfavourite}
      </div>
    );
  }
}

快车路线

export const starAnimal = (req, res) => {
  var filter = { _id: req.params._id };
  var update = {
    $set: {
      status: 'Favourite',
      modified_by: req.body.modified_by,
    },
  };

  Animal.updateOne(filter, update, (err, a) => {
    if (err) {
      throw err;
    } else {
      res.status(200).json({
        message: 'animal is now a favourite',
      });
    }
  });
};

标签： javascriptreactjsmongodbexpress

解决方案

使 componentDidMount 中的 api 调用成为一个单独的函数，例如，

const getAnimals = () => {
  axios.get(`http://localhost:4000/animals`, {
        
    })
    .then((animal)=> {
        this.setState({animals: animal.data})   
    }
}

然后在starAnimal中调用这个函数

starAnimal = async values => {

    var moddedby = sessionStorage.getItem("username");
     

    const data = {
        modified_by:  moddedby
    }

    fetch(`http://localhost:4000/assign/animal/starred/${values}`, {
    method:'PUT',
    body: JSON.stringify(data)})        
}).then(res =>{
    console.log("success");
   // refetching the animals
    this.getAnimals();
})

也在 componentDidMount 中调用它

componentDidMount() {
   this.getAnimals();
}

推荐阅读