当数据加载到 useState 中时，我的组件在页面加载后进行动画处理

Question

我在挂载组件之前使用 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>

在页面加载时，组件加载时没有数据，然后在数据加载到组件后进行动画处理。我的目标是在加载页面之前将数据加载到组件上，这样就不会触发转换？

Answer 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} />