- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我知道在为尚未安装的组件设置状态时会抛出错误。这解释了我使用 setState 函数而不是显式直接设置状态的错误。
import React, {Component} from 'react';
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {term: ''}; // -> seems to be the agreed means to set initial state
// this.setState({term: ''}); // -> generates an error
}
render() {
return (
<div>
<input onChange={event => this.setState({term: event.target.value})}/>
Value of the input: {this.state.term}
</div>
);
}
}
The error I get when I uncomment the second line this.setState({term: ''}) is:
警告:setState(...):只能更新已安装或安装的组件。这通常意味着您在未安装的组件上调用了 setState() 。这是一个空操作。请检查组件的代码。
我知道如何防止错误,只需通过显式设置状态而不告诉 React 任何相关信息,我已经看到 github 问题讨论错误:Github Issue #3878不过我想知道的是,为什么 React 不能解决这个问题?如果从构造函数调用 setState 它知道这是它第一次被使用?我可能把它简化得太多了,但如果有人有一个很好的技术答案,为什么不呢?
最佳答案
React 类总是使用名为 state
的属性初始化,该属性设置为 null
值,如 source code 中所示.如您所知,React 提供了一个 setState
方法来操作这个属性。根据docs :
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().
简而言之,setState()
是一个异步的、多步骤的、不可预测的操作,会导致组件重新渲染。调用这样的函数需要一个对象已经完全初始化,因此在类仍在安装时不会发生。在完全初始化之前,它已经尝试对类执行生命周期操作。
当然,如果您希望组件以非 null
的状态开始,但又不想立即导致多个渲染和操作发生,那么就会出现问题。这就是为什么 React 提供了一种无需依赖 setState
即可初始化组件状态的方法。在 ES5 中,这是在名为 getInitialState
的属性中设置初始状态。但是,ES6 引入了一种本地语法,用于在使用特殊 constructor 初始化类时设置属性。方法(因此 React 不再需要自己的自定义版本)。这就是为什么,如果你想在安装时用状态初始化 React 组件,你必须将其声明为 this.state = {}
而不是使用 setState()
.
关于javascript - 为什么在类构造函数中使用 setState 方法时 React 会抛出错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36488195/
我可以在传递给 this.setState() 的回调定义中显式调用 this.setState() 吗? this.setState( { openA:true }, () => {
我有一个从 api 获取数据的场景。在这种情况下,每当我从商店获取新值时,我的 componentWillReceiveProps() 就会被触发。 componentWillReceiveProps
在这个 componentDidUpdate 方法中,在执行 setState 将引号设置为从 fetch 返回的内容后,我必须使用回调再次执行 setState 以将 randomQuoteInde
正如 another question 中向我指出的那样,如果我在 setState、randomQuoteIndex() 中有一个不带参数的函数调用,并且该函数使用该 setState 中设置的状态
问题:当我使用 this.setState 并在回调中输出状态时,它根本不会改变,但是当我将 setstate 嵌套在 setstate 中时,它就会正常工作。 例子:这行不通- this.setSt
这个问题在这里已经有了答案: Why does setState take a closure? (2 个答案) 关闭 4 年前。 我对这两者的区别还是有点迷惑 isBusy = false;
当我使用 setState () 文本出现在调试控制台中.. setState() callback argument returned a Future. The setState() method
这个问题已经有答案了: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (4 个回答) React - unca
之间的区别 - this.setState({value: 'xyz', name: 'john', color: 'orange'}) 对比 setValue('xyz'); setName('jo
之间的区别 - this.setState({value: 'xyz', name: 'john', color: 'orange'}) 对比 setValue('xyz'); setName('jo
我在运行代码时收到以下警告: Line 48: Do not mutate state directly. Use setState() react/no-direct-mutation-state
我是 React 的新手,我注意到我们使用 this.setState() 而不是 super.setState() 请我清楚地解释为什么我们用它来调用父类(super class)方法??示例: c
我一生都无法在我的 react 组件中传递这个 TypeError 。我已阅读所有相关主题并实现了几乎所有建议的修复,但均无济于事。 import React, { Component } from
我知道这可能是一个 JavaScript 问题而不是 React 问题,但我无法理解 React setState 的上述签名。 函数参数列表中的方括号和逗号有什么作用? 我知道如何将它与更新程序一起
是否可以在this.setState的回调中调用this.setState? 我正在制作一个 Roguelike Dungeon 并有一个设置,其中在 this.setState 的回调中使用了一个辅
我正在使用 react-navigation 进行路由。在一个组件上,我尝试设置 navigationOptions 以显示汉堡包按钮以打开和关闭侧边栏(抽屉)。所以 onPress 我试图为我的侧边
在之前的 React 版本中,我们可以在状态更改后执行代码,方法如下: setState( prevState => {myval: !prevState.myval}, () => { co
有一个 react 问卷组件,它将选定的答案添加到 this.state = {answer: []} 中,效果很好。同时,当用户更新答案时,它会添加为另一个对象。当questionID相同时,是否有
我正在使用 WebSocket 与我的服务器进行通信,并在我的 handleSubmit() 函数上输入一些值,并在此基础上与服务器进行通信并将我的状态更新为数据从 ws 收到。所以,第一次,一切都工
componentDidMount(prevProps, prevState, prevContext) { let [audioNode, songLen] = [this.refs.aud
我是一名优秀的程序员,十分优秀!