小编man*_*yat的帖子

所以，我的问题是我有一个组件，我将一个动画与它相关联，并且在第一次渲染组件时它正在工作，但是在事件单击时我更改了与该组件关联的一些条件和一些道具，但是我的元素没有被重新渲染，它只是改变了已更改的内容，这意味着该元素不会从 dom 中删除，而是再次添加到 DOM 中，这就是为什么我无法再次看到动画，所以它不是 re -rendered 或者我只是没有明白重新渲染的意思。

我当然尝试了一些解决方案，但我被卡住了，我尝试使用这种方法：

this.forceUpdate();

但同样，我仍然没有得到任何东西。

我不认为我必须编写我编写的整个代码，因为它很多并且包含许多其他内容，但这是我认为需要的。

我的组件中的 methodWillReceiveProps ：

  componentWillReceiveProps(props) {
    if (props.isRerendered) {
      this.forceUpdate();
    }
  }

props.isRendered 每次都返回 true，我检查了一些 console.log 方法。

这是呈现的内容：

render() {
    return (
      <div
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

这是 sass 文件和简单的淡入淡出动画：

.tls-forms {
  animation: formFading 3s;
  // childs properties here 
}

@keyframes formFading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} …

我正在切换以前通过令牌提供的某些 CRUD 功能，但现在我正在使用 SWR，但我不知道如何转换它。我将这个钩子用于 GET 方法，但对于其他方法，我不知道该怎么办！

export default function useGetData(apiKey) {
const fetcher = async (...args) => await fetch(...args).then(res => res.json());
const { data, mutate, error } = useSWR(apiKey, fetcher);

const loading = !data && !error;

return {
    loading,
    user: data,
    mutate
}
}