使用 useEffect 强制对渲染初始状态做出反应答案

【问题标题】：Force react to render initial state with useEffect使用 useEffect 强制对渲染初始状态做出反应
【发布时间】：2020-03-28 10:10:29
【问题描述】：

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

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

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

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

问题可能是，React 正在批处理状态更新 - 所以有时图形实际上“增长”，但有时它会立即出现。有没有办法强制呈现初始状态？或者其他一些解决方法？

【问题讨论】：

标签： reactjs react-hooks react-state-management

【解决方案1】：

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

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

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

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

【讨论】：