Динамическая настройка состояния по умолчанию OnMouseEnter

#reactjs

Вопрос:

Я создал табло, которое обновляется, когда пользователь наводит курсор на карточку каждой команды, наведение курсора на карточку команды также изменяет некоторые атрибуты CSS, чтобы выделить ее. Текущее значение состояния по умолчанию равно «0», мне нужно, чтобы значение по умолчанию было равно баллу лучшей команды. Ниже приведен компонент TeamCard, который обновляет топ-группы с помощью OnMouseEnter:

 const TeamCard = ({  data,  setDisplayGoals,  setDisplayMilestones,  setDisplayPoints, }) =gt; {  return (  lt;TeamCardStylegt;  lt;Row className="d-flex justify-content-between"gt;  {!data amp;amp; lt;Spinner /gt;}  {data amp;amp;  data.getGroupScores amp;amp;  data.getGroupScores.slice(0, 4).map((group, index) =gt; {  return (  lt;Col  key={guid()}  className="teamCard mt-2 mb-2 mx-1"   onMouseEnter={() =gt; [  setDisplayGoals(group.goalsDone),  setDisplayPoints(group.totalScore),  setDisplayMilestones(group.milestonesDone),  ]}  gt;  lt;Rowgt;  {/* lt;div className="arrow-down" /gt; */}  lt;p key={guid}gt;{seed[index]}lt;/pgt;  lt;/Rowgt;  lt;Rowgt;  lt;Col className="hideSmall"gt;  lt;img className="mouseOn" src="../images/group.png" /gt;  lt;img  className="mouseOff"  src="../images/groupSelected.png"  /gt;  lt;/Colgt;  lt;/Rowgt;  lt;p key={guid}gt;{group.name.slice(0, 14)}lt;/pgt;  lt;/Colgt;  );  })}  lt;/Rowgt;  lt;/TeamCardStylegt;  ); };

Это фрагмент компонента TopGroups:

 const TopGroups = () =gt; {  const currentQTR = `Q${moment().quarter()} ${moment().year()}`;  const { loading, error, data } = useQuery(GET_GROUP_SCORES, {  variables: { quarter: currentQTR },  });  if (data) {  const sortedGroups = data.getGroupScores.sort((a, b) =gt; {  if (a.totalScore gt; b.totalScore) {  return -1;  }  if (a.totalScore lt; b.totalScore) {  return 1;  } else {  return 0;  }  });  const test = data.GoalsDone;  }  if (error) {  return lt;pgt;An error has occuredlt;/pgt;;  }  if (loading) {  lt;Spinner /gt;;  }   const [displayGoals, setDisplayGoals] = useState("0");  const [displayPoints, setDisplayPoints] = useState("0");  const [displayMilestones, setDisplayMilestones] = useState("0");   return (  lt;div className="row-12"gt;  lt;TeamCard  data={data}  setDisplayGoals={setDisplayGoals}  setDisplayPoints={setDisplayPoints}  setDisplayMilestones={setDisplayMilestones}  /gt;

Я включил изображение приложения при его первой загрузке, я бы хотел, чтобы эти нули были результатом команды № 1, в этом случае он должен представлять машину-клоуна команды.

1. Поскольку вы уже сортируете данные по групповым оценкам, не могли бы вы просто изменить состояние использования на что-то вроде .useState(сортированные группы[0]);

2. Я попытался это сделать, но это вызвало ошибку, сортировка групп не определена.

3. в этом случае вы можете выполнить useState((загрузка)?»0″:сортировка групп[0]); чтобы убедиться, что он обновит его только после загрузки данных

4. Я получил ту же неопределенную ошибку

Ответ №1:

Может быть, вы сможете использовать что-то подобное, когда получите данные

 useEffect(()=gt;{ setDisplayGoals("first group's goals"), setDisplayPoints("first group's points"), setDisplayMilestones("first group's Milestones") },[])

вы поняли мою идею. Пустые скобки приведут к тому, что эффект использования будет выполняться только при первом рендеринге.