Javascript 使用“排列”操作符复制阵列状态并添加所有匹配的对象

我试图将所有与正则表达式匹配的对象排序到一个数组中。 这似乎不适用于spread运算符和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]);

const[accessories，setAccessories]=useState（[]）；
const[paints，setPaints]=useState（[]）；
const[samples，setSamples]=useState（[]）；
//将订单加载到状态
useffect（（）=>{
loadUser（）；
getOrderById（match.params.orderId）；
}, []);
//将订单加载到状态
useffect（（）=>{
如果（！加载）{
控制台日志（订单行项目）；
for（设i=0；i

传播调用的结果

。将
过滤到调用中：

useEffect(() => {
  if (loading) {
    return;
  }
  const items = order.line_items;
  setAccessories([
    ...accessories,
    items.filter(({ sku }) => sku.match(/^(TAC|T.BU.AC)/))
  ]);
  setPaints([
    ...paints,
    items.filter(({ sku }) => sku.startsWith('TBA') || sku.match(/^TCR(?!0000)|^TCR0000/))
  ]);
  setSamples([
    ...samples,
    items.filter(item => item.sku.match(/^TCR\d+P?\d+SAMP/))
  ]);
}, [loading]);

你在这里犯的错误很少

错误1：
使用
for
循环在单个
useffect
块中多次调用相同的
setStates
可能会极大地影响React的性能。同样，这显然违反了，仅在顶级调用挂钩

仅在顶层调用挂钩

不要在循环、条件或嵌套函数中调用钩子

错误2：
虽然这并不像以前那样严重，但仍然是一个错误。不要使用更好的解决方案，而是使用内置的JavaScript方法，如
filter
，而不是为
循环编写自己的

useffect（（）=>{
让我们看看附件；
让我们来画画；
让我们看看样品；
如果（！加载）{
_附件=订单.行项目.过滤器（{sku}）=>sku.匹配（/^（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/）
//切勿在for循环中使用setState
//使用效果
//还要避免多次调用同一个setState
//如果要访问，请使用callback setState
//以前的州，但不是强制性的
//对于类组件
设置附件（s=>[…s，…_附件]）
SetPaint（s=>[…s，…_Paint]）
设置样本（s=>[…s，…_样本]）
} 
//使用效果中的返回具有不同的作用
//比正常功能
}，[加载]）
order.line\u items[i].sku.match（/^TCR（？！0000）/）| order.line\u items[i].sku.match（/^TCR0000/）
没有意义-如果
sku
以TCR开头，至少其中一个将计算为
true
。你要找的关于0000的逻辑是什么？