javascript - 如何使用用户输入在 React 中进行 API 调用？ (缩略图渲染太快)

Question

“无法读取未定义的属性‘缩略图’”!

以下代码的目的是获取用户输入(书名)，然后将该信息传递给 API 调用。然后在状态中设置 API 调用。然后渲染表单中的信息被附加到 DOM 中。

由于某种原因，最后一个 Prop “照片”出现上述错误。我相信原因是由于渲染在 API 调用之前运行，尽管我不确定。除照片 Prop 外，所有其他 Prop 都会出现在页面上。

作为软件初学者，我希望获得以下方面的帮助:

• 上述问题
• 我应该实现 ComponentDidMount 以及如何实现？

我尝试有条件地渲染 Prop ，尽管我不确定我是否正确执行了此操作。

  state = {
    searchedBook: "",
    responseBook: false
  };

...

 photo={this.state.responseBook ? this.state.responseBook.imageLinks.thumnail : null}

这停止了错误，但没有将照片渲染到页面。

App.js

import React, { Component } from "react";
import "./App.css";
import Form from "./components/Form";
import BookCard from "./components/BookCard";

class App extends Component {
  state = {
    searchedBook: "",
    responseBook: ""
  };

  onChange = event => {
    this.setState({ searchedBook: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    const url = `https://www.googleapis.com/books/v1/volumes?q=${
      this.state.searchedBook
    }`;
    fetch(url)
      .then(response => response.json())
      .then(data =>
        this.setState({
          searchedBook: "",
          responseBook: data.items[0].volumeInfo
        })
      )
      .catch(error => console.log("error", error));
  };

  render() {
    return (
      <div className="App">
        <Form
          handleSubmit={this.handleSubmit}
          onChange={this.onChange}
          state={this.state}
        />

        <BookCard
          title={this.state.responseBook.title}
          subTitle={this.state.responseBook.subtitle}
          averageRating={this.state.responseBook.averageRating}
          photo={this.state.responseBook.imageLinks.thumnail}
        />
      </div>
    );
  }
}

export default App;

BookCard.js

import React from "react";

const BookCard = props => {
  return (
    <div className="book-card--container">
      <img src={props.photo} alt="book cover" className="book-card--img" />
      <div className="container">
        <h1 className="book-card--h1">{props.title}</h1>
        <h2 className="book-card--h2">{props.subTitle}</h2>
        <span className="book-card--span">
          {props.averageRating} out of 5 stars
        </span>
      </div>
    </div>
  );
};

export default BookCard;

表单.js

import React from "react";

const Form = props => {
  return (
    <form onSubmit={props.handleSubmit}>
      <input value={props.state.searchedBook} onChange={props.onChange} />
      <button>Search!</button>
    </form>
  );
};

export default Form;

Answer 1

他们就这样回来了。

photo={this.state.responseBook ? this.state.responseBook.imageLinks.thumnail : null}

并且您编写了没有 b 的 thumnail。

您应该将所有缩略图替换为缩略图。