Блог

У меня есть плотный график с несколькими аннотациями с дополнительным параметром UUID. У меня также есть список этих аннотаций, и я хочу, чтобы аннотация, которую я выбираю в списке, меняла цвет границы. Функция, которую я использую для изменения цвета границы, заключается в следующем:

 const annotations = [  {...},  {...} ] const selectAnnotation = (id)=gt; {  const dummyAnnotations = clone(annotations)  dummyAnnotations.forEach((note) =gt; {  if (note.id===id){  note.bordercolor = 'red'  } else {  note.bordercolor = 'white'  }  })   setAnnotations(dummyAnnotations)  }  lt;h2gt;Annotations:lt;/h2gt; {annotations.map((note)=gt;  lt;li key={note.id}gt;  lt;button   className='button'  onClick = {()=gt;selectAnnotation(note.id)}  gt;  {note.text}amp;nbsp;  lt;/buttongt;   lt;/ligt; )}  

Однако, когда я нажимаю на аннотацию в списке, соответствующая на графике исчезает, чтобы появиться снова, только когда я изменяю размер графика вручную. Вот несколько скриншотов:

Постройте график перед выбором какой-либо заметки

График после выбора одной заметки

График после изменения размера окна, теперь заметка вернулась и с новым цветом границы

Есть какие-нибудь идеи о том, что происходит? Спасибо!