Question

woocommerce商店的最终应用程序，但是我在渲染数组的第一个图像时遇到问题当我console.log（images.src）时，我看到图像的URL列表，但是在img src =中它返回：TypeError：无法读取未定义的属性'src' 我将非常感谢您帮助我正确映射图像。这是我的代码：

class App extends React.Component  {
  constructor(props) {
    super(props);
    this.getPosts = this.getPosts.bind(this);
    this.state = {
    posts : [],
    images: []
    };
  }
  getPosts = async () => {
    let res = await api.get("products", {
      per_page: 20,
    })

    let { data } = await res;
    this.setState({ posts: data });
  }

 componentDidMount = async () => {
  await this.getPosts();
};
 render() {
  const { posts } = this.state;
  const { images } = this.state
  return(
    <div>
   <Head>
      <title>Онлайн магазин KIKI.BG</title>
      <link rel="icon" href="/favicon.ico" />

 </Head>

 <React.Fragment >
                {posts.map((posts, index ) => {
                  { 
                    posts.images.map((images, subindex) =>

                  console.log(images.src),
                    <img src={images[0].src} />
                    )}
                    return (
                      <div>
                <h1>{posts.name}</h1>
                <h2>{posts.price}</h2>
                             </div>  
                             )})}
          </React.Fragment>

 </div>
  )
}
  }
  export default App;

Answer 1

            {posts.map((posts, index ) => {
              { 
                posts.images.src.map((image, subindex) =>

                <img src={image.src} />
                )}
                return (
                  <div>
                       <h1>{posts.name}</h1>
                       <h2>{posts.price}</h2>
                 </div>  
                )
              })}

Answer 2

好吧，console.log(images.src) i see the list of urls of the images没有任何意义。images是数组。那么images[0]应该是上面带有属性src的数据的图像吗？顺便说一句，这段代码中的很多东西都是错误的。

不要重新绑定getPosts绑定在构造函数中的getPosts函数（通过类属性）（getPosts）。不需要绑定的BTW根本不在这里，它不称为回调。
奇怪的是，您在await res之后打电话给api.get() ...不只是await api.get()吗？当您执行类似await之类的操作时，通常会在提取时使用另一个await response.json()。
componentDidMount中不需要异步/等待
如果getPosts抛出该异常，则会弄乱您的组件，例如，更好地处理catch和call props.onError（error）中的错误
您在地图中的元素上没有任何key属性，这是错误的。您应该在其中放置一些唯一的ID（URL fe ?，如果不相同，则为id），以正确渲染组件。
您的地图中出现一些奇怪的括号问题...
您不应该在页面上使用一个以上的h1：-）
images.src应该是字符串，而不是数组...
为什么不使用子索引和索引？
为什么在任何地方都没有填充图像时要存储图像？他们是在得到回应吗？那就是为什么你遇到TypeError的原因！
我会添加加载且没有数据消息...

那是我的代码：

import { Component, Fragment } from 'react';

class App extends Component {

  static defaultProps = {
    onError: console.error;
  };

  state = {
    posts: [],
    images: [],
    loading: false,
  };

  // This could be done with hooks much better tho...
  async componentDidMount () {
     this.setState({ loading: true });

     try {      
       await this._fetchData();
     }
     catch (error) {
       this.props.onError(error); // Or something rendered in state.error?
     }
     finally {
       this.setState({ loading: false });
     }
  }

  render () {
    const { images, posts, loading } = this.state;

    if (!images.length) {
      return <div>No data.</div>;
    }

    if (loading) {
      return <div>Loading</div>;
    }

    const postBoxes = posts.map((post, index) => {
      const image = images[index];
      // Because you don't know, if that specific image is there... if this are your data..
      const imageElement = image ? 
         <img src={image.src} alt="dont know" /> :
         null;
      const { name, price } = post;

      // If name is unique, otherwise some id.
      return (
        <Fragment key={name} >
          {imageElement}

          <h2>{name}</h2>
          <h3>{price}</h3>            
        </Fragment>
      );      
    });

    return (
      <div>
        <Head>
          <title>Онлайн магазин KIKI.BG</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>

        <Fragment>
          {postBoxes}
        </Fragment>
      </div>
    );
  }

  async _fetchData () {
    const { data } = await api.get('products', { per_page: 20 });

    const { posts, images } = data;

    this.setState({ posts, images });
  }
}


export default App;

Answer 3

如果console.log(images.src)->提供图像列表。

然后

<img src={images.src[0]}/>->应该可以解决问题。

可能是，确定要添加一个空检查。

  images.src[0] && <img src={images.src[0]}/>

反应数组中的图像渲染数组

3 个答案: