React 数组状态不会立即更新

Question

当我初始化一个包含 30 个项目的数组时，它被添加到 suppliers 状态。我只想在输入 nameFilter 时立即让该数组为空，因为当我调用 loadSuppliers() 方法时，条件 if(filter) { console.log(suppliers) } 能够检测到这个立即空数组。

Obs.：filter 变量的目的是使其在 if 中只执行一次 loadSuppliers() 条件。

代码：

const [nameFilter, setNameFilter] = useState("");
const [suppliers, setSuppliers] = useState<ISupplier[]>([]);

let filter = false;

useEffect(() => {
  if(nameFilter.length > 0) {
    setSuppliers([]); // I don't know the right way
    // setSuppliers(prev => { return prev; }); // ways I've tried
    // setSuppliers(prev => prev = []); // other tried
    filter = true;
  }
  loadSuppliers();
}, [nameFilter]);

let source;

const loadSuppliers = async () => {
  const CancelToken = axios.CancelToken;
  source = CancelToken.source();

  await api.get(`/projects/suppliers/${id}?name=${nameFilter}`, {
    cancelToken: source.token
  }).then(({data}) => {
    if(filter) {
      console.log(suppliers); // here I would need it to return an empty array
      filter = false;
    }
    setSuppliers([...suppliers, ...data]);
  }).catch((err) => {
    if (axios.isCancel(err)) {
      console.log('Request canceled', err.message);
    }
    console.log(err.message);
  });
};

const handleInputChange = (e) => {
  // cancel the request
  if (typeof source != typeof undefined) {
    source.cancel('Operation canceled due to new request.');
  }
  setNameFilter(e.target.value); // this change triggers the useEffect
};

输入：

<input
  id="filter"
  name="filter"
  type="text"
  value={nameFilter}
  onChange={handleInputChange}
/>