当在 useState 中加载数据时，我的组件在页面加载后动画答案

【问题标题】：My component is animating after page load when the data is loaded in the useState当在 useState 中加载数据时，我的组件在页面加载后动画
【发布时间】：2020-02-19 22:30:19
【问题描述】：

我正在使用 useState() 在组件挂载之前加载一些数据。

  const [leaderboardData, setLeaderboardData] = useState([]);
  const [featuredSelectedItem, setSelectedItem] = useState({});
  useEffect(() => {
    let dummyData = [
      ..someData
    ]
    //Order based on standings
    dummyData.sort((a, b) => {
      return a.current_season_standing - b.current_season_standing;
    });

    dummyData[0].active = true;
    setSelectedItem(dummyData[0]);
    setLeaderboardData(dummyData);
  }, []);

我的组件包含在一个转换组中。

     <div className="d-flex h-100 home_container">
      <TransitionGroup className="p-5 flex-1 home_selected_user">
        <SwitchTransition>
          <CSSTransition
            key={featuredSelectedItem.id}
            timeout={500}
            classNames="featuredItem"
          >
            <div>
              <img src="https://via.placeholder.com/150" alt={featuredSelectedItem.name} />
              <h1>{featuredSelectedItem.name}</h1>
              <p>Rank: {featuredSelectedItem.current_season_standing}</p>
              <p>Country: {featuredSelectedItem.country}</p>
              <p>Handicap: {featuredSelectedItem.handicap}</p>
              <p>Wins: {featuredSelectedItem.wins}</p>
              <p>View Player Profile</p>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </TransitionGroup>
      <div className="home_leaderboard p-4 flex-1">
        <Leaderboard activeHandler={activeLeaderboardHandler} data={leaderboardData}></Leaderboard>
      </div>
     </div>

在页面加载时，组件加载时没有数据，然后在数据加载到组件后动画。我的目标是在页面加载之前将数据加载到组件上，以便不会触发转换？

【问题讨论】：

标签： reactjs react-hooks react-transition-group

【解决方案1】：

当数据在 useState 中加载时，我的组件在页面加载后动画

这是因为useEffect() 将在每次渲染后运行。在你的useEffect() 里面是你有setSelectedItem() 的地方。

我的目标是在页面加载之前将数据加载到组件上，以便不会触发转换？

如果你想拥有它，将数据作为道具传递。然后使用featuredSelectedItem 进行条件渲染。

function SomeComponent(props) {
  // initialize using props
  const [featuredSelectedItem, setSelectedItem] = useState(props.data);

  return (
    featuredSelectedItem.length > 0 &&
      <TransitionGroup>...</TransitionGroup>
  )
}

// Usage:
const dummyData = [...someData]

// pass dummyData as prop
<SomeComponent data={dummyData} />

【讨论】：