一旦 state 或数据在反应 class 使用组件确实安装后如何重新加载页面

Question

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

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

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',
      });
    }
  });
};

Answer 1

使 api 在 componentDidMount 中调用一个单独的 function 像，

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

然后在starAnimal中调用这个function

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();
}