Question

我正在构建一个测试应用程序以了解有关React的更多信息，并且我已经进行了一个API调用，它获取了一个巨大的JSON对象。
我能够将这个json打破到我需要的部分，现在我有10个阵列，每个3个道具。我可以将3个道具中的这10个阵列发送到另一个组件，这需要使用这3个道具10次并分别渲染div class Card。

我可以console.log(this.props)它显示10个不同的数组，每个数组有3个道具，但是，我不能生成10次相同的元素..我尝试使用map（）但是因为我的数组最初未定义，所以map（）也无法正常运作。在Angular中有没有像* ngFor那样的反应？

最好的方法是什么？

*编辑这里有更多的代码人。对不起还是noobie ..

错误：this.props.map不是函数

 return(
    <div>            
 {this.props.map((data,i)=>{
       return(
          <li key={i}>{data.likes}</li>
           );

*编辑2 所以我尝试使用if条件运行map函数，但代码仍然会在条件成立的那一刻打破..

render() { 
 if(this.props.url !== undefined){
     this.props.map((data,i) =>{
       return <li key={i}>{data.likes}</li>
     })
   }

我的州法是：

state = {
        userId: undefined,
        likes: undefined,
        url: undefined
    }

我在每个数据流上设置我的值如下：

const pics = await fetch(`${base_url}?key=${api_key}&q=${query}
            &img_type=photo&per_page=12`).then(response => {
                    return response.json();
                })

            pics.hits.map((data) =>{
                return this.setState({
                    userId: data.user_id,
                    likes: data.likes,
                    url: data.webformatURL
                })
            })

Answer 1

this.props没有map，它不是数组。它是一个对象，具有传递给组件的每个属性的属性。例如：

<YourComponent foo="bar"/>

... this.props.foo的值为"bar"。

因此，如果您将数组传递给组件，请执行以下操作：

<YourComponent theArrayProperty={[{likes: 42},{likes:27}]} />

...那么你需要该属性的名称：

return (
    <div>            
        {this.props.theArrayProperty.map((data,i) => {
            return (
                <li key={i}>{data.likes}</li>
            );
        })}
    </div>
    );

附注：您可以使用简明的箭头函数代替map回调：

return (
    <div>            
        {this.props.theArrayProperty.map((data,i) => <li key={i}>{data.likes}</li>)}
    </div>
    );

...如果您将开头标记放在()的行上，则无需使用return（如果＆{39}，则无法取消( ; s在下一行，但你可能知道）：

return <div>            
        {this.props.theArrayProperty.map((data,i) => <li key={i}>{data.likes}</li>)}
    </div>;

......但那是一种风格问题。

Answer 2

由于您提供的信息很少，我猜测当您尝试使用未定义的值时，代码在map（）处失败。尝试添加条件检查以呈现

{道具＆amp;＆amp; props.map（[RENDER CODE HERE]）}

Answer 3

您可以使用简单的if语句来检查数组是否未定义，然后将其传递给map函数。

Answer 4

另一种选择是为空数组设置defaultProps。

MyComponent.defaultProps = {
  arrProp: []
};

无法呈现值数组（React组件）

4 个答案: