如何修复：“类型错误：无法读取 null 的属性‘打印类型’”

Question

I'm building a google book search app, and before I even start I open up the inspect and I see on my console

"Warning: Can't call setState on a component that is not yet mounted".

Also, just to see what other errors that come up I did a book search and the error that I am getting back says

"TypeError: Cannot read property 'print-type' of null". And the console is pointing to this line of code as the problem "this.state["print-type"]"

I'm new to react so right now I am all thumbs do I need to put a componentDidMount within my handler or will I need to further bind this handler in order for it to work?

In my constructor I have inserted this.handleSearch = this.handleSearch.bind(this) thinking that this will solve my problem with

"Can't call setState on a component that is not yet mounted."

but this did not work.

constructor(props) {
    super(props);
    this.setState({
      "print-type": "all",
      filter: "ebooks"
    });
    this.handleSearch = this.handleSearch.bind(this);
  }

  changeFilter(e) {
    const filter = e.target.value();
    this.setState({
      filter
    });
  }

  changePrintType(e) {
    const printType = e.target.value();
    this.setState({
      "print-type": printType
    });
  }

  handleSearch(q) {
    console.log(this.state);
    const key = "AIzaSyAJ448LHnJ0N6XxzOyIRfhJFveQzwHU_Ms";
    const baseurl = "https://www.googleapis.com/books/v1/volumes";
    const url = `${baseurl}?q=${encodeURIComponent(q)}&key=${key}&print-type=${
      this.state["print-type"]
    }&filter=${this.state.filter}`;
    const options = {
      headers: {
        "Content-Type": "application/json"
      }
    };

I expect to see all books with the same title I search for.

Answer 1

The correct way of initialising the state is -

this.state = {
      print-type: "all",
      filter: "ebooks"
    };

The correct way of setting the state is -

this.setState({
      print-type: printType
    });

Answer 2

"Warning: Can't call setState on a component that is not yet mounted" is the result of setState() inside constructor() . You need to change it to this.state because you're just defining your state there.

Answer 3

We never write setState in constructor,

constructor(props) {
    super(props);
    this.setState({
      "print-type": "all",
      filter: "ebooks"
    });
    this.handleSearch = this.handleSearch.bind(this);
  }

You need to define state,

constructor(props) {
    super(props);
    this.state ={
      print_type: "all",   //never write state name like `print-type`, use underscore instead
      filter: "ebooks"
    }
    this.handleSearch = this.handleSearch.bind(this);
  }

Whenever you want to use print_type write like , this.state.print_type .

For setState,

this.setState({print_type:printType})

Answer 4

To answer your main question, calling setState inside the constructor is a big no no in React because you have not yet defined the component's initial state . You are trying to alter something that isn't defined.

Instead of this.setState({...}) in your constructor, use this.state = {...} to define the initial state of your component. You also have a lot of other issues in your code besides that. However, your main issue is the constructor of your component. That is called before it is 'mounted.' Once a component is 'mounted,' you may then alter the component's state by using this.setState({...}) .

Other things I can see that are either incorrect or not good practice are:

• You are using hyphens in JSON. Don't use hyphens. Use traditional camel-casing, ie printType .

• Your change filter function is also incomplete, but you likely know that.

• e.target.value() is not valid because e.target.value is not a function. Use e.target.value from here on out.

• Lastly, you also need to bind your changeFilter and changePrintType functions the same way you are binding your handleSearch function.

In my honest and humble opinion, you should probably take just a quick 20 minute JavaScript refresher. I feel like trying to learn a library without mastering the basics is going to make learning the React library more difficult than it needs to be.