Question

我将循环设置为一种状态，但不是期望的：

state={
  product:[
   {
     frontImage:"frontImage1.jpg",backImage:"backImage1.png"
   }, 
   {
     frontImage:"frontImage2.jpg",backImage:"backImage2.png"
   }
 ]
}

我尝试使用这样的代码

state = {
  product: this.props.location.state.colorPick.map(color => {
    frontImage:null,
    backImage:null
  })
};

但是结果是这样的：

{0: undefined1: undefined}

Answer 1

如果您想使用道具来生成所需的输出，请使用对象数组[{...}]

state = {
   product:[
      {frontImage:"frontImage1.jpg",backImage:"backImage1.png"}, 
      {frontImage:"frontImage2.jpg",backImage:"backImage2.png"}
   ]
}

请考虑在componentDidMount()中处理此逻辑。如果尝试在状态初始化期间创建数组，则不能保证在组件首次呈现之前将期望的prop-values传递给其他对象。这就是componentDidMount()进入的地方，它会在组件渲染一次后执行 AFTER 逻辑，我们可以期望props会在那时被传递。

尝试类似的东西：

componentDidMount(){
  const newProduct = this.props.location.state.colorPick.map(() => {
     return {
         frontImage:null,
         backImage:null
     }
  })
}

此外，在您的.map()中，您没有使用简写形式，并且从未明确调用过 return ，因此您不会得到所需的对象。

如何在React状态下进行循环？

1 个答案: