javascript - 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>
   </>
  );
};

在开发工具中，我看到加载状态始终保持错误。

Answer 1

您可能需要将加载状态设置为 true，并在设置所有项目后将加载状态更改为 false。