javascript - 使用扩展运算符复制数组状态并添加所有匹配的对象

Question

我正在尝试将与正则表达式匹配的所有对象排序到一个数组中。 这似乎不适用于展开运算符和 useState，有什么办法可以做到这一点吗？ 我现在得到的结果是样本只给我最后一个与其匹配的对象，而没有其他任何东西。 我想要的效果是所有匹配的样本都被插入样本状态。

  const [accessories, setAccessories] = useState([]);
  const [paints, setPaints] = useState([]);
  const [samples, setSamples] = useState([]);

  // Load order into state
  useEffect(() => {
    loadUser();
    getOrderById(match.params.orderId);
  }, []);

  // Load order into state
  useEffect(() => {
    if (!loading) {
      console.log(order.line_items);
      for (let i = 0; i < order.line_items.length; i++) {
        if (order.line_items[i].sku.match(/^(TAC|T.BU.AC)/)) {
          console.log('SKU: ', order.line_items[i].sku);
          //@ts-ignore
          setAccessories([...accessories, order.line_items[i]]);
          console.log(accessories);
        }
        if (order.line_items[i].sku.startsWith('TBA') || order.line_items[i].sku.match(/^TCR(?!0000)/)
          || order.line_items[i].sku.match(/^TCR0000/)) {
          //@ts-ignore
          setPaints([...paints, order.line_items[i]]);
        }
        if (order.line_items[i].sku.match(/^TCR\d+P?\d+SAMP/)) {
          console.log(samples);
          console.log(order.line_items[i]);
          //@ts-ignore
          setSamples([...samples, ...[order.line_items[i]]]);
        }
      }
    }
  }, [loading]);

Answer 1

嗯，你在这里犯了一些错误。

错误1:

使用 for 循环在单个 useEffect block 内多次调用相同的 setStates 方式，这可能会极大地影响 React 的性能。再次强调，这显然违反了 Rules of Hooks ，仅在顶层调用 Hook

Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions.

错误2:

虽然这没有以前那么严重，但它仍然是一个错误。不使用更好的解决方案，使用内置的 JavaScript 方法，例如 filter，而不是编写自己的 for 循环

useEffect(() => {
  let _accessories;
  let _paints;
  let _samples;

  if (!loading) {
    _accessories = order.line_items.filter(({ sku }) => sku.match(/^(TAC|T.BU.AC)/))

    _paints = order.line_items.filter(({ sku }) => sku.startsWith('TBA') || sku.match(/^TCR(?!0000)|^TCR0000/))

    _samples = order.line_items.filter(({ sku }) => sku.match(/^TCR\d+P?\d+SAMP/))

    // Never use setState inside a for loop
  // of useEffects
  // Also avoid calling same setState multiple times

  // use callback setState if you want to access
  // previous state, but it ain't a compulsory like
  // for class components
  setAccessories(s => [ ...s, ..._accessories ])
  setPaints(s => [ ...s, ..._paints ])  
  setSamples(s => [ ...s, ..._samples ])
  } 

  // return in useEffect has different role
  // than normal functions

}, [loading])