ReactJS: состояние не меняется при вызове setLoading

Question

когда вызывается функция addItems (), я изменил состояние загрузки на true. но это всегда остается ложным. что мне здесь не хватает?

const Persons = props => {
  const [data, setData] = useState([]);

  useEffect(() => {
    addItems();
  }, []);

  let [position, setPosition] = useState(
    (props && props.match && props.match.params.placeholder) || 0
  );

  const [loading, setLoading] = useState(false);

  const numOfItem = 4;

  const addItems = () => {
    setLoading(true);
    const items = [...data];

    for (let i = 0; i < numOfItem; i++) {
      const newItem = getData[position];
      // if no item is found than go out from that loop
      if (!newItem) break;
      position++;
      items.push(newItem);
    }

    setData(items);
    setPosition(position);
    setLoading(false);
  };

  return (
    <>
      {data.map(p => (
        <Person person={p} />
      ))}

      <button onClick={addItems}>Quick Load More {numOfItem} items</button>
   </>
  );
};

в devtools, я вижу, что состояние загрузки всегда остается ложным.

Answer 1

Возможно, вам потребуется запустить состояние загрузки как true, а после установки всех элементов изменить состояние загрузки на false.