Question

我想在Array中显示所有图像，我使用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>
        );
    }
    }
}

我希望所有图片都显示出来 results of the code

这是我的数据

My data from API

This is data from my State

Answer 1

您所做的是从states数组中的api插入gif数组，像这样的cpal state已经是一个对象数组，因此只需将它们分配给{{1 }}

如果您检查{ gifs: [[gifsarr]]}，空数组将总是返回response.data.data，则必须检查this.state.gifs是否大于0

true

sandbox

Answer 2

根据您的代码，它将显示数组中的第一张图片。如您提供的[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>

Answer 3

尝试：

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>
    );
  }

您不必担心else部分，因为当列表为空白时，将不会渲染内部div。即会有一个空的.container div

Answer 4

如何生成数组是代码的特定部分。您可以创建一个代码沙箱供我们测试。

但是，就显示来自src's数组的图像而言，这通常是我要做的：

注意：：当您映射数组时，React将在结果数组的每个元素上要求一个key属性。只要您不打算重新订购商品，就可以使用index号。如果这样做，则需要某种唯一的ID来用作key。

function App() {
  
  const 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"
  ];
  
  const imageItems = imagesArray.map((image,index) => 
    <div key={index} className="imageContainer">
      <img src={image} className="image"/>
    </div>
  );
  
  return(
     <React.Fragment>
      {imageItems}
     </React.Fragment>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));

.imageContainer {
  height: 100px;
  width: 100px;
  border: 1px solid silver;
  margin-top: 5px;
}

.image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

如何在reactJS中显示来自Array的所有图像？

4 个答案: