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中，我看到加载状态始终为false。

Answer 1

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

ReactJS：调用setLoading时状态没有改变

1 个答案: