当其他信息正常工作时，反应使用全局变量而不是给定信息

Question

第一本书和第二本书有自己不同的信息当我在将显示在屏幕上的书中调用此信息时，除图像外，所有内容都显示正确的信息。

在代码中有一行 const img = "link"。

两本书都使用来自那个 img var 的 link 不在列表中当我尝试评论该行时，它显示错误

const firstBook = {
  img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL210_SR195,210_.jpg",
  title: "Atomic Habits",
  author: "James Clear",
  price: "12.00"
};


const secondBook = {
  img: "https://images-na.ssl-images-amazon.com/images/I/51bUnMij9mL._SX322_BO1,204,203,200_.jpg",
  title: "It Ends with Us: A Novel",
  author: "Collen Hoover",
  price: "10.00",
};


**// why this is using as the default as the image link ? [enter image description here][1]**

const img =
  "https://images-na.ssl-images-amazon.com/images/I/51bUnMij9mL._SX322_BO1,204,203,200_.jpg";

// main function book 

function Booklist() {
  
  return (
    <section className="booklist">
      <Book
        img={firstBook.img}
        title={firstBook.title}
        author={firstBook.author}
        price={firstBook.price}
      />

      <Book
        img={secondBook.img}
        title={secondBook.title}
        author={secondBook.author}
        price={secondBook.price}
      />
    </section>
  );
}


const Book = (props) => {

  return (
    <article className="book">
      <img src={img} alt="" />
      <h1>{props.title}</h1>
      <h4>{props.author}</h4>
      <h6>price: ${props.price}</h6>
    </article>
  );
}
ReactDOM.render(<Booklist/>,document.getElementById('root'))

Answer 1

您引用的是您声明的 const img，而不是作为 Book 的道具传入的 img。像您的其他道具一样，将您的 <img src={img} /> 更改为 <img src={props.img} />

当其他信息正常工作时，反应使用全局变量而不是给定信息

react is using global var instead of given information when other information is working fine

css

reactjs