Javascript 如何在reactJS中显示阵列中的所有图像？

我想显示数组中的所有图像，我使用了map，但它不起作用

export default class Content extends Component {
    constructor(){
        super();
        this.state = {
            gifs: []
        }
    }

    componentDidMount(){
        axios.get('https://api.giphy.com/v1/gifs/trending?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G')
        .then( response => {
            this.setState({ gifs: [...this.state.gifs, response.data.data] }); // This line is different
        })
        .catch(function(error){
            console.log(error);  
        })

    }

    render() {
        if (this.state.gifs){
        return (
                <div className="container">
                    {this.state.gifs.map( gif =>(
                    <div className="card mt-5" style={{width: 224 + 'px'}} key={gif[0].id}>
                    <img className="card-img-top" src={gif[0].images.preview_gif.url}alt="test"></img>
                    <div className="card-body">
                        <h4 className="card-title">{gif[0].title}</h4>
                    </div>
                    </div>
                        ))}
              </div>
        );
    }
    }
}

导出默认类内容扩展组件{
构造函数（）{
超级（）；
此.state={
gifs:[]
}
}
componentDidMount（）{
axios.get（）https://api.giphy.com/v1/gifs/trending?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G')
。然后（响应=>{
this.setState（{gifs:[…this.state.gifs，response.data.data]}）；//此行不同
})
.catch（函数（错误）{
console.log（错误）；
})
}
render（）{
if（this.state.gifs）{
返回(
{this.state.gifs.map（gif=>(
{gif[0]。标题}
))}
);
}
}
}

我希望所有的图像都能显示出来

这是我的数据

---

根据您的代码，它将显示阵列中的第一个图像。正如您提供的[0]。 请使用下面的代码并检查它

<div className="container">
  {this.state.gifs.map( gif =>(
    <div className="card mt-5" style={{width: 224 + 'px'}} key={gif.id}>
      <img className="card-img-top" src={gif.url} alt="test"></img>
      <div className="card-body">
          <h4 className="card-title">{gif.title}</h4>
      </div>
    </div>
  ))}
</div>

{this.state.gifs.map（gif=>(
{gif.title}
))}

您所做的是将api中的GIF数组插入

state

数组中，就像这样

{gifs:[[gifsar]}

response.data.data

已经是一个对象数组，只需将它们分配给

this.state.gifs

如果检查

if（this.state.gifs）{}

则空数组将始终返回

true

，您必须检查

长度

是否大于0

class Content extends React.Component {
  constructor() {
    super();
    this.state = {
      gifs: []
    };
  }

  componentDidMount() {
    axios
      .get(
        "https://api.giphy.com/v1/gifs/trending?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G"
      )
      .then(response => {
        this.setState({ gifs: response.data.data }); // This line is different
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    if (!this.state.gifs.length) return null;

    return (
      <div className="container">
        {/* gif is an object and not an array you dont need to access it by index */}
        {this.state.gifs.map(gif => (
          <div className="card mt-5" style={{ width: 224 + "px" }} key={gif.id}>
            <img
              className="card-img-top"
              src={gif.images.preview_gif.url}
              alt="test"
            />
            <div className="card-body">
              <h4 className="card-title">{gif.title}</h4>
            </div>
          </div>
        ))}
      </div>
    );
  }
}

类内容扩展了React.Component{
构造函数（）{
超级（）；
此.state={
gifs:[]
};
}
componentDidMount（）{
axios
.得到(
"https://api.giphy.com/v1/gifs/trending?api_key=nNwaquW24K8gLDmrxGTmawppQoTkXxLQ&tag=&rating=G"
)
。然后（响应=>{
this.setState（{gifs:response.data.data}）；//此行不同
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
如果（！this.state.gifs.length）返回null；
返回(
{/*gif是一个对象而不是数组，您不需要通过索引*/}访问它
{this.state.gifs.map（gif=>(
{gif.title}
))}
);
}
}

试试：

render() {
    return (
      <div className="container">
        {this.state.gifs.map(gif => (
          <div className="card mt-5" style={{ width: 224 + "px" }} key={gif.id}>
            <img
              className="card-img-top"
              src={gif.images.preview_gif.url}
              alt="test"
            />
            <div className="card-body">
              <h4 className="card-title">{gif.title}</h4>
            </div>
          </div>
        ))}
      </div>
    );
  }

render（）{
返回(
{this.state.gifs.map（gif=>(
{gif.title}
))}
);
}

---

您不必担心else部分，因为当列表为空时，所有内部div都不会被渲染。i、 e.将有一个空的.container div

如何生成数组是代码的特定部分。你可以制作一个代码沙盒让我们测试它

但就显示来自

src的数组的图像而言，我通常是这样做的：

注意：映射数组时，React将要求结果数组的每个元素上都有
键
属性。您可以使用
索引
编号，只要您不打算重新订购商品。如果需要，则需要某种唯一的ID用作
键


函数应用程序（）{
常量imagesArray=[
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Thumbup.jpg",
"https://sociorocketnewsen.files.wordpress.com/2013/11/thumb-top1.jpg?w=640",
"https://news.power102fm.com/wp-content/uploads/2014/02/thumbs-up-.jpg"
];
常量imageItems=imagesArray.map（（图像，索引）=>
);
返回(
{imageItems}
);
}
ReactDOM.render（，document.getElementById（'root'））
.imageContainer{
高度：100px；
宽度：100px；
边框：1px纯银；
边缘顶部：5px；
}
.形象{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}

它不工作，类型错误：无法读取未定义的属性“preview\u gif”。请看有0的数据，如果我不给出[0]，这将是返回错误，我已编辑，请再次检查。只要按照您提供的工作代码替换参数即可。或错误。或您正在获得的输出。可以在renderPlease中添加console.log（this.state.gifs）请检查API中的数据，如果我不放置[0]，它将返回一个error@SyahrizalSetiawan我还更新了在
map
函数中访问
gif
属性的方式，只需从我的answer@SyahrizalSetiawan我添加了一个“看一看”