Question

我正在尝试在加载数据时为区域创建一个占位符。应该从x轴“增长”。我创建了如下简单的功能组件

const [visible, setVisible] = useState(false);

useEffect(() => {
  setVisible(true);
}, []);

return(
  <Area
    ....
    y0={d => visible ? d.y : 0}
  />
)

问题可能是，React正在批处理状态更新-因此有时该图实际上在“增长”，但有时它立即出现。有没有办法强制执行初始状态的呈现？还是其他解决方法？

Answer 1

在这种情况下（使用加载程序指示器），您应该为动画添加一些超时（“增长”效果）：

const [visible, setVisible] = useState(false);

useEffect(() => {
  setTimeout(() => {
    setVisible(true);
  }, 1000);
}, []);

return <Area y0={({ y }) => (visible ? y : 0)} />;

强制做出反应以使用useEffect渲染初始状态

1 个答案: