Question

由于某种原因，我的状态图像未在ReactJS中呈现到我的网页上。

我尝试使用movie.poster_src，但是它仍然让我出错。还一直在搜索如何从状态中提取图像以在页面上呈现

import React, { Component } from 'react';
import './App.css';
import {Button} from "react-bootstrap"

class App extends Component {

  constructor(props) {
    super(props);
    console.log("This is my initializer");

    const movies = [
      { id: 0, poster_src="https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Avengers", overview: "dfnkjsnknsdfnjksdnfjkdsnfkjnsdf"},
      { id: 1, poster_src="https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg", title:"Supermsan", overview: "knsjkdsnkjfnjkdsnfkjsndfj"},
      { id: 2, poster_src="https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg"}
    ];
    this.state = {
      rows: [
      <p key="0">This is my row0</p>,
      <p key="1">This is my row1</p>,
      <p key="2">This is my row2</p>
    ]}


    const movieRows = []; 

    movies.forEach((movie)=> {
      console.log(movie.id);
      const movieRow = 
      <table key={movie.id}>
        <tbody>
          <tr>
            <td>
              <img src={movie.poster_src} alt="image"/>
            </td>
            <td>
              {movie.title}
            </td>
          </tr>
        </tbody>
      </table>
      movieRows.push(movieRow);
    })
    console.log("hsbds",movieRows)

    this.state = {
      rows: movieRows
    }
  }


  handleSearch =(e)=> {
    e.preventDefault();
    const searchTerm= e.target.elements.input.value;
    console.log(searchTerm);
  }

  render() {
    return (
      <div className="App">
       <table className="tableStyle">
         <tbody>
           <tr>
             <td>
               <img alt="app icon" className="moviesLogo" src="http://pluspng.com/img-png/movie-png-hd-http-www-indigital-co-in-upload-channellogo-1696.png"/>
             </td>
             <td width={8}/>
             <td className="logoText">
               <h2>MoviesNow Search</h2>
             </td>
           </tr>
         </tbody>
       </table>
       <form className="formStyle" onSubmit={this.handleSearch}>
        <input name="input" className="inputStyle" placeholder="Enter movie title" />
        <Button type="submit" bsStyle="warning" className="searchButtonStyle">Search</Button>
       </form>
       {this.state.rows}
      </div>
    );
  }
}

export default App;

我要显示图像。但是我遇到了一个错误：

./ src / App.js 第12行：解析错误：意外的令牌

10 | 11 |常量电影= [

12 | {id：0，poster_src =“ https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg” ，标题：“ Avengers”，概述：“ dfnkjsnknsdfnjksdnfjkdsnfkjnsdf”}， | ^ 13 | {id：1，poster_src =“ https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg” ，标题：“ Supermsan”，概述：“ knsjkdsnkjfnjkdsnfkjsndfj”}， 14 | {id：2，poster_src =“ https://www.sideshowtoy.com/wp-content/uploads/2018/08/dc-comics-batman-statue-sideshow-prime1-studio-feature-2005181-2.jpg” } 15 | ];

在React JS中渲染图像的问题

0 个答案: