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中，我看到加载状态总是保持为false。

Answer 1

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