Блог

Я столкнулся с каким-то странным поведением.

Когда я устанавливаю флажок в дочернем компоненте, который вызывает функцию в родительском компоненте для задания состояния, консоль немедленно регистрирует действие от родителя, но отображение флажка меняется только через 2 секунды. Если я не изменю состояние, дисплей немедленно изменится. Если я помещу состояние в дочерний компонент и изменю его там, отображение немедленно изменится. Если я помещу отладчик в дочерний компонент в начале функции, отображение немедленно изменится. Нет никакой разницы между использованием событий onClick и onChange.

Ввод флажка находится в компоненте карты, вложенном в компонент Home, который вложен в компонент приложения.

Когда флажок установлен, он добавляет идентификатор этой валюты в массив выбранных валют. Массив хранится в состоянии.

Компонент приложения:

 import { useEffect, useState } from "react"; import { Routes, Route } from "react-router-dom"; import axios from "axios";  import Navbar from "./components/Navbar"; import Home from "./components/home/Home"; import Chart from "./components/Chart";  function App() {  const [data, setData] = useState([]);  const [selectedCurrencies, setSelectedCurrencies] = useState([]);    useEffect(() =gt; {  axios.get("https://api.coingecko.com/api/v3/coins/list").then((res) =gt; {  setData(res.data);  });  }, []);   const changeSelectedCurrencies = (id) =gt; {  if (selectedCurrencies.includes(id)) {  const newSelection = selectedCurrencies.filter(e =gt; e !== id);  setSelectedCurrencies(newSelection);  console.log(id);  } else {  setSelectedCurrencies((prevCurrencies) =gt; [...prevCurrencies, id]);  console.log(id);  }  }  return (  lt;divgt;  lt;Navbar /gt;  lt;Routesgt;  lt;Route path="/" element={lt;Home data={data} onToggleSelection={changeSelectedCurrencies} /gt;} /gt;  lt;Route path="chart" element={lt;Chart /gt;} /gt;  lt;/Routesgt;  lt;/divgt;  ); }  export default App;  

Компонент карты:

 import { useState } from "react"; import "./Card.css";  const Card = ({ details, onToggleSelection }) =gt; {  const [selectedCurrencies, setSelectedCurrencies] = useState([]);   const changeSelectedCurrencies = (id) =gt; {  if (selectedCurrencies.includes(id)) {  const newSelection = selectedCurrencies.filter(e =gt; e !== id);  setSelectedCurrencies(newSelection);  console.log(id);  } else {  setSelectedCurrencies([...selectedCurrencies, id]);  // setSelectedCurrencies(() =gt; [...selectedCurrencies, id]);  console.log(id);  }  }    const checkboxHandler = (e) =gt; {  debugger;  console.log(e.target.checked);  // console.log(details.id);  // changeSelectedCurrencies(details.id);  onToggleSelection(details.id);  }   return (  lt;div className="card"gt;  lt;input type="checkbox" name="" id="" onClick={checkboxHandler} /gt;  {/* lt;input type="checkbox" name="" id="" onChange={checkboxHandler} /gt; */}  lt;divgt;id: {details.id}lt;/divgt;  lt;divgt;name: {details.name}lt;/divgt;  lt;divgt;symbol: {details.symbol}lt;/divgt;  lt;/divgt;  ); };  export default Card;