Question

我正在构建一个Google图书搜索应用程序，甚至在开始之前我都要打开检查窗口，然后在控制台上看到

“警告：无法在尚未安装的组件上调用setState”。

此外，只是为了看看还会发生什么其他错误，我做了一本书的搜索，而我回来的错误则显示为

“ TypeError：无法读取null的属性'print-type'”。控制台将这行代码指向问题“ this.state [“ print-type”]“

我是新来的反应者，所以现在我很生气，我需要在我的处理程序中放置一个componentDidMount吗？还是需要进一步绑定此处理程序才能使其正常工作？

在我的构造函数中，我插入了Repo.clone_from(url, repo_dir, env={"GIT_SSH_COMMAND": 'ssh -i /PATH/TO/KEY'})，以为这将解决我的

问题。

“无法在尚未安装的组件上调用setState。”

但这没用。

this.handleSearch = this.handleSearch.bind(this)

我希望看到所有与我搜索的书名相同的书。

Answer 1

初始化状态的正确方法是-

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

设置状态的正确方法是-

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

Answer 2

"Warning: Can't call setState on a component that is not yet mounted"是setState()中constructor()的结果。您需要将其更改为this.state，因为您只是在此处定义状态。

Answer 3

我们从不在构造函数中编写setState，

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

您需要定义状态，

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);
  }

每当您要使用print_type时，都应像this.state.print_type这样写。

对于setState，

this.setState({print_type:printType})

Answer 4

要回答您的主要问题，在React中调用构造函数内部的setState是 big ，否则，因为您尚未定义组件的初始状态。您正在尝试更改未定义的内容。

使用this.setState({...})而不是构造函数中的this.state = {...}来定义组件的初始状态。除此之外，您的代码中还有很多其他问题。但是，您的主要问题是组件的构造函数。在“挂载”之前调用它。一旦“挂载”了组件，您就可以使用this.setState({...})来更改组件的状态。

我看到的其他不正确或不正确的做法是：

您正在JSON中使用连字符。不要使用连字符。使用传统的骆驼壳，即printType。
您的变更过滤器功能也不完整，但是您可能知道这一点。
e.target.value()无效，因为e.target.value不是函数。从这里开始使用e.target.value。
最后，您还需要以绑定changeFilter函数的相同方式来绑定changePrintType和handleSearch函数。

以我的坦率和谦逊的观点，您可能应该只花20分钟快速浏览一下JavaScript。我觉得试图在不掌握基础知识的情况下学习一个库将使学习React库比需要的更加困难。

如何解决：“ TypeError：无法读取null的属性'print-type'

4 个答案: