时间戳

首页 > 解决方案 > JSX won't render properly

javascript - JSX won't render properly

问题描述

我的 JSX 不会在我的 React 网页上正确显示，而是得到以下输出：

<div class='card'>NaNSasha<img src= NaN />Boddy Cane</div>.

组件：

import React,  {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component{

  state = {

    string : '',
  }

  componentDidMount(){

     let posts = [

        {
          title: 'somebody toucha my spaghet',
          author: 'Karen',
          image:'https://media-cdn.tripadvisor.com/media/photo-s/11/69/c7/f9/spagetti.jpg',
          location: 'Jimmy John',
          description: 'This spagetti is amazing'
        },
        {
          title: `I love food`,
          author: 'Sasha',
          image:'https://hoodline.imgix.net/uploads/story/image/610603/donuts2.jpg?auto=format',
          location: 'Boddy Cane',
          description: 'cjndwsijnjcinjw'
        }
    
  ];

      for(let i =0; i < posts.length; i ++){

        const header = `<div class='card'>${+posts[i].title}`;
        const body = posts[i].author;
        const image = `<img src= ${+posts[i].image} />`;
        const description = `${posts[i].location}</div>`;
  
        const concatThis = header + body + image + description
        this.setState({
  
          string: concatThis
        });
      };
    };
    
  render(){

    return(

      <div className='container'>
      {this.state.string}
      </div>
      
    
    )
  }
}

export default App;

PS我是学生

标签： javascriptreactjsconcatenationjsx

解决方案

这就是你要找的。表达式+{}被计算为NaN。但请使用列表渲染。

        const image = `<img src= ${+posts[i].image} />`;
                                   ^ here

推荐阅读