Javascript 如何使用用户输入在React中进行API调用？（thumnail渲染过快）

“无法读取未定义的属性'thumnail'”

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

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

作为一名软件初学者，我希望能在以下方面得到帮助：

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

我已经尝试过有条件地渲染道具，尽管我不确定是否正确地渲染了道具

  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;

import React，{Component}来自“React”；
导入“/App.css”；
从“/components/Form”导入表单；
从“/components/BookCard”导入BookCard；
类应用程序扩展组件{
状态={
检索本：“，
回应书：“
};
onChange=事件=>{
this.setState（{searchedBook:event.target.value}）；
};
handleSubmit=事件=>{
event.preventDefault（）；
常量url=`https://www.googleapis.com/books/v1/volumes?q=${
这个.state.searchedBook
}`;
获取（url）
.then（response=>response.json（））
。然后（数据=>
这是我的国家({
检索本：“，
响应簿：数据。项[0]。卷信息
})
)
.catch（error=>console.log（“error”，error））；
};
render（）{
返回(
);
}
}
导出默认应用程序；

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;

从“React”导入React；
const BookCard=道具=>{
返回(
{props.title}
{props.subTitle}
{props.averageRating}五颗星中的一颗星
);
};
导出默认图书卡；

Form.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;

从“React”导入React；
const Form=props=>{
返回(
搜索
);
};
导出默认表单；

它看起来像

这个.state.responseBook.imageLinks

是

未定义的

您可以尝试在控制台中记录变量并查看其变量：

console.log（this.state.responseBook）

您正在访问自己的API吗？还是公共的？

他们就这样回来了

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

你写的

thumnail

没有

b

---

您应该将所有

thumnail

替换为

thumnail

这是因为在您的本地州，您将responseBook作为Bolean值。当它为false时，您试图像访问对象一样访问它的属性。您尝试访问的responseBook处于api调用状态

state = {responseBoolean: false
         responseBook: this.props.responseBook}

---

您需要更改布尔值的名称，然后将App.js中的real responseBook对象作为道具引入。

我认为。。。打字错误

photo={this.state.responseBook.imageLinks.thumnail}

=>

photo={this.state.responseBook.imageLinks.thumnail}

@zynknk谢谢你的评论，但不幸的是，如果我把“photo”注释掉，那就不是打字错误了prop并在上面添加您建议的console.log。它会返回一个空行，在我键入时重复空行，直到我单击submit按钮，然后返回我想要的对象。@NewTech您将

console.log

放在哪里了？您应该将它放在接收API调用的函数中，它只会在我更改它后打印一次，但没有实现以下代码

photo={this.state.responseBook？this.state.responseBook.imageLinks.缩略图：null}

，所以认为它仍然不起作用。谢谢你的帮助，我真的很感激it@NewTech您是否检查了

属性？还有一个

thumnail