将undefined传递给React setState是错误的吗？
将undefined传递给React setState是错误的。在React中，调用setState方法时，传递undefined作为参数是合法的，但它不会触发组件的重新渲染。相反，如果想要清除或重置某个状态，可以将null作为参数传递给setState方法。
在React中，setState方法用于更新组件的状态，并触发重新渲染。它接受一个对象或一个函数作为参数。当传递一个对象时，React会将该对象与当前状态进行合并，并更新组件的状态。当传递一个函数时，该函数会接收先前的状态作为参数，并返回一个新的状态对象。
如果将undefined传递给setState方法，React会忽略该调用，不会触发重新渲染。这是因为React认为undefined不是一个有效的状态值，它只会更新状态对象中存在的属性，而不会添加新的属性。
总结起来，将undefined传递给React setState方法是合法的，但不会触发重新渲染。如果想要清除或重置某个状态，应该传递null作为参数。
相关·内容
2回答
我需要用一个从setState中获取的对象来实现redux store。问题是，当我在组件中调用setState时，我将得到undefined。知道如何用获取的数据来设置状态的默认值吗？
这是我的组成部分：
import React, { useEffect, Fragment, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
const contactDetails = useSelector((state) => state.contac
浏览 5提问于2022-02-06得票数 1
回答已采纳
My Concern
我构建了一个组件PageLayoutSideBar.tsx，它包含两个道具：sideBar + content。此组件将成为插入具有适当样式和sideBar宽度的sideBar和页面的简单方法。如果一个支柱在content中发生变化，那么整个PageLayoutSideBar组件会重新呈现，这将重新呈现sideBar吗？
问题
我如何有效地制作这个组件，使整个组件不会重新呈现？如果一个支柱或数据在ComponentOne、ComponentTwo和/或ComponentThree中发生变化，我不希望重新呈现该ComponentTwo。
PageLayoutSideBar.
浏览 5提问于2021-03-15得票数 0
1回答
如何将redux存储的某些值分配给组件本地状态？
我应该使用redux操作从componentDidMount()方法中的API获取数据。我说的对吗？在通过redux获取数据之后，我希望使用redux存储中的数据来设置组件的状态，我得到了一个错误，this.props.article是未定义的。但是redux显示了项目对象的存在。
我应该在哪里调用this.setState()方法？我试着用componentWillRecieveProps()或componentDidUpdate()来称呼它，但没有成功。请预先通知任何help.Thank。
import React, { Component
浏览 0提问于2019-03-19得票数 1
回答已采纳
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
1回答
目前，我在.erb文件中呈现组件，如下所示：
<%= react_component('Counter', number: @counter) %>
此组件具有一个使用promised-xhr的函数。
push: function(operation) {
if(operation) {
new_number = this.state.number +1;
} else {
new_number = this.state.number -1;
}
// This call works.
// this.setS
浏览 5提问于2015-07-08得票数 0
回答已采纳
2回答
我现在正在我的React应用程序中实现像flash消息这样的Rails。闪光消息本身是好的，但现在我希望闪光消息自动消失在一些页面。我最初在我的闪存组件中使用了setTimeout，但收到了这个错误。
未捕获的错误:不变冲突: enqueueCallback(...)：您使用不可调用的回调调用了setProps、replaceProps、setState、replaceState或forceUpdate。
下面是代码。
import React from 'react/addons';
var ReactCSSTransitionGroup = React.addons.CS
浏览 0提问于2015-11-18得票数 0
回答已采纳
1回答
从组件外部更改状态
、、、
我正在使用expo中的react native，并试图在应用程序运行时(活动的或后台的)获取当前位置更新。但我不能从外部更改组件的状态。 我尝试使用静态函数将位置从任务管理器方法传递给组件，但它不起作用。 export default class App extends React.Component {
state = {
location: null,
errorMessage: null,
};
componentDidMount = async () => {
await Location.startLocationUpdatesAsyn
浏览 13提问于2019-09-14得票数 3
回答已采纳
当用户点击一个特定的选项时，我使用react和routers来显示来自一系列子react的线程。然而，我一直收到“无法读取未定义的属性'map‘”的错误，并且我找不出原因。
import React from 'react';
import { fetchCatThreads } from './RedditApi';
import ThreadCard from './ThreadCard';
import Loading from './Loading';
export default class CatsPag
浏览 1提问于2019-10-07得票数 2
1回答
我现在学的是反应-本土化。
我试图在scriptone.js中将一个变量存储到异步中，并在scripttwo.js中调用它。
但是我未能将变量存储在scriptone.js中。
我在scriptone.js中导入的内容：
import React, { Component, BackAndroid } from "react";
import { AsyncStorage } from 'AsyncStorage';
import { View, Text, StyleSheet, Button, Image, TouchableOpacity, TextInp
浏览 0提问于2019-01-19得票数 0
回答已采纳
我有以下几点：
import React from 'react';
import {render} from 'react-dom';
import Form from './form.jsx';
import axios from 'axios';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
location: ''
};
}
ge
浏览 2提问于2016-10-08得票数 1
回答已采纳
我正在创建一个简单的联系人反应应用程序，我已经创建了一个链接的名称，将去一个显示组件。
但是，当我点击链接时，它是{contactId: "undefined"}和{contact: undefined}
下面是我的联系人组件代码。
import React from 'react';
import { Link } from 'react-router';
const Contact = props =>
<div className= 'pure-u-1-3'>
<h1>
浏览 0提问于2018-10-18得票数 0
回答已采纳
Layout.js
import React, {Component} from "react"
import Aircraft from "./Aircraft"
class Layout extends Component {
constructor(props) {
super(props)
this.state = {
test: true,
acn: ""
}
}
WhatIsAircraftName = (acn
浏览 3提问于2019-09-28得票数 1
回答已采纳
我试图从另一个类获取一个类的状态，但它抛出了一个错误"cannot read property ' state‘od undefined“。我的方法是当用户按下按钮时，"FromStr“状态从A重定向到另一个类B。我尝试过
import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import styles from "./appstyles";
im
浏览 0提问于2020-02-05得票数 0
1回答
我有以下HTML结构：
我在网站加载时加载一个Content组件：
ReactDOM.render(React.createElement(Content), document.getElementById('content'));
在这个组件中，我想将另一个组件放入带有一些道具的导航div中，例如：
var Content = React.createClass({
getInitialState: function () {
return {
isUserSignedIn: this.isUserSignedIn(),
浏览 2提问于2016-10-11得票数 0
我正在尝试编写一个使用this.context中的值来派生状态对象的类组件。我有一个返回这样一个对象的方法getStyle。在constructor时，我调用this.getStyle从已经最新的状态开始，并加速初始呈现。 但是，似乎在constructor调用时，this.context是undefined，并且在render调用时它一直保持这种状态。 我是不是在代码中做错了什么？ 我不记得React的(新)上下文API文档中有任何与此问题相关的细节。this.context在componentDidMount时间是可用的，然而，这将需要一个setState，这将导致额外的组件重新呈现，这
浏览 35提问于2021-04-21得票数 0
我是新手来回应JS。我正在尝试编制setState示例程序，以更改文本，同时使用下面的代码单击按钮。
import React, {Component} from 'react'
class StateExample extends Component {
constructor(){
super()
this.state = {
message : 'state example'
}
}
changeMessage() {
alert("I was clicked");
conso
浏览 0提问于2019-07-31得票数 1
回答已采纳
2回答
这是我的客户端代码库。它正在使用一个exchange，但不使用此websocket。有什么建议吗？
websocket参考：
import React, { Component, createContext } from "react";
export const Contx = createContext();
export class ConProvider extends Component {
state = {
coins: [],
digCoin: [],
sou: [],
passSocket: undefined
};
浏览 2提问于2020-01-22得票数 0
回答已采纳
据了解，在状态更改后，function将重新呈现，例如，从setState中调用useState()，从useContext()变量调用函数或变量。但是现在我不明白为什么我会得到ESLint警告调用useCallback()中的上下文函数，而不需要列表中的依赖项。如果我将依赖项放到列表中，useCallback()将被重新呈现，来自useCallback()变量的useEffect()依赖将再次呈现。那么，在调用react-hooks/exhaustive-deps变量内的函数时，如何修复useContext()呢？
Auth.js
import React, { createContext,
浏览 7提问于2022-04-03得票数 1
回答已采纳
我在react中有一个onClick事件： onClick={this.selectedComponent} 下面是selectedComponent： selectedComponent = (e) => {
e.preventDefault();
this.setState({
component: e.target.name,
});
}; 这可以很好地工作。但是，当我试图在onClick事件中传递两个函数时，我得到了一个错误，即Cannot read property 'preventDef
浏览 30提问于2020-11-10得票数 1
回答已采纳
1回答
我正在尝试弄清楚如何将react状态设置为数据库的值。我正在使用。
var Duck = React.createClass({
getInitialState:function(){
return { century:'' }
},
fridge:function(){
var db = new Dexie('homie');
db.version(1).stores({
friends:'name, race'});
db.open().catch(function(){
alert("Open failed: ");
浏览 8提问于2016-07-29得票数 2
回答已采纳
3回答
最新的@types/react (v15.0.6)使用了TypeScript 2.1中为setState添加的特性，即Pick<S, K>。这是一件好事，因为现在输入是正确的，因为在更新之前，输入“不知道”setState正在合并this.state，而不是替换它。
此外，使用Pick使setState函数在允许的输入方面非常严格。不再可能向state添加未在组件定义( React.Component的第二个泛型)中定义的属性。
但是，定义动态更新处理程序也更加困难。例如：
import * as React from 'react';
interface Pe
浏览 10提问于2017-02-07得票数 12
回答已采纳
我在app.js中有一个组件，它调用另一个JavaScript文件client.js中的函数，我希望在createTimer函数失败且checkStatus抛出错误时将showError的状态设置为true。这样，当函数失败时，我可以显示ErrorSegment。
我得到的错误是：client.js:93 Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined
当createTimer函数失败时，如何显示错误段？
另外一个问题是，我如何在5秒后或每当我执行另一个操作后有效地将状态
浏览 0提问于2016-09-06得票数 0
回答已采纳
我正在用React构建一个相当简单的博客应用程序。我从这个React组件中得到一个非常奇怪的错误。下面是错误：
×
TypeError: Cannot read property 'setState' of undefined
toggleEditing
src/blogform.js:11
8 | }
9 | }
10 | toggleEditing(){
> 11 | this.setState({
12 | editing: !this.state.editing
13 | })
14 | }
下面
浏览 2提问于2017-10-05得票数 0
我使用带有回调的setState来确保状态更新后运行。
...
this.setState({enabled : true},this.getData);
}
getData () {
const self = this;
fetch(this.props.url,{
method : 'post',
body : this.state
}).then(function (response) {
return response.json();
}).then(function (result
浏览 8提问于2018-01-07得票数 4
回答已采纳
我有一个React.Component，render()是这样声明的：
render(){
return <div>
<button id="butt" onClick={()=> $("#noti").change("test") }>click me</button>
<Notification id="noti" onMounted={() => console.log("test")}/>
</
浏览 3提问于2019-11-14得票数 1
回答已采纳
使用react，在函数组件返回的JSX代码中，我可以拥有：
MyComponent.jsx
<MySubComponent props1={{a: 0, b:1}}/>
OR
<MySubComponent props2={["toto", "tata"]}/>
其中，我的子组件是通过回忆录导出的：
MySubComponent.jsx
export default React.memo(MySubComponent)
但是，这会破坏回忆化，因为格式为{.}或{.}的道具每次都会实例化一个新的对象/数组(值相同，但内存地址不同)，因此道具
浏览 2提问于2021-11-30得票数 1
我正在使用react.js处理一个事件crud应用程序，我得到了以下错误：
TypeError: this.props.onDelete不是一个函数
这是用户界面：
这就是当我单击delete时出现的错误：
当我点击编辑的时候，我也会得到同样的错误。
以下是代码：
import React, { Component } from "react";
class Event extends Component {
onDelete = () => {
// console.log('event ', this.props.
浏览 4提问于2020-03-16得票数 0
回答已采纳
2回答
我正在学习一些关于React/Redux的教程。我不清楚的部分是输入表格。我的意思是如何处理更改以及如何管理状态--这是一个非常简单的表单，只有一个字段。
export default class UserAdd extends React.Component {
static propTypes = {
onUserSubmit: React.PropTypes.func.isRequired
}
constructor (props, context) {
super(props, context);
this.state = {
name: t
浏览 2提问于2016-07-11得票数 1
回答已采纳
当用户单击TopicsList组件并隐藏SelectedTopicPage组件时，我希望显示SelectedTopicPage组件。但是，我得到了错误:主题上的Uncaught TypeError: Cannot read property 'bind' of undefined -list.jsx文件。
main-controller.jsx
import {React, ReactDOM} from '../../../build/react';
import TopicsList from '../topic-list.jsx';
imp
浏览 0提问于2016-02-09得票数 3
回答已采纳
我正在尝试更改state和URL onChange在<Input type='select'>上。(我用的是反应带)
import React, {Component} from 'react'
import {
Input,
} from 'reactstrap'
export default class NewPostComponent extends Component {
constructor(props) {
super(props)
this.state = {
浏览 0提问于2018-07-14得票数 5
回答已采纳
我正在编写一个全栈应用程序，它显示来自我的sql服务器的问题，并显示在前端。在每个问题中都有一个接受和拒绝按钮。我只想让我的accept向我的数据库发送一个响应，并拒绝向我的数据库发送一个响应(当然两者是不同的)。
但是，当创建问题并创建绑定到处理提交的提交时，它会抛出一个错误(如下所示)。
我如何为每个答案创建两个单独的句柄提交，然后将数据发送到另一个表，但使用映射问题上的ID，以便它可以用作外键。
这是因为它是映射数据吗？
有问题的代码
import React, { Component } from "react";
import "./customers.css
浏览 2提问于2020-01-13得票数 1
1回答
在下面的父组件中，我有一个带有两个选项的下拉列表。如果选择“顶级”，则会显示一个名为Form1的表单。如果我选择"MAKE“，那么一个名为Form2的表单将显示出来。如果没有选择，那么这两种形式都是隐藏的。我在我的父组件中有一个Button，我想提交当前表单中显示的任何输入。因此，如果选择了“顶级”，并且单击了按钮，我希望记录来自Form1的输入。这有可能做到吗？还是我需要把所有的东西都放在一个组件中？如果可能的话，我需要使用Formik吗？如果我走错了路，请给我一个更好的建议。
父组件
import * as React from "react";
import {
浏览 3提问于2020-04-07得票数 0
回答已采纳
我正在为ReactJ中的菜单创建一个动态列表。每个菜单项的数据都是bing通过AJAX从JSON文件中提取的。当单击菜单项时，我希望菜单关闭。当单击其中一个菜单项时，我将给出整个列表的道具"whenClicked“。以下是代码：
var MenuList = React.createClass({
getInitialState: function() {
return {data: []}
},
componentWillMount: function() {
$.ajax({
url: 'htt
浏览 1提问于2015-06-19得票数 0
回答已采纳
有人能让我知道我在componentWillUnmount我的代码时遗漏了什么吗？ 错误是 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Layout (cr
浏览 50提问于2019-03-15得票数 3
回答已采纳
我一直在学习ReactJS，我编写了一个简单的程序，其中一些记录显示在一个列表中，每一条记录都可以通过单击其删除按钮来删除。在我的代码中有三个组件。“存储”调用“视图”组件显示记录，“视图”调用“操作”组件用于删除任何记录。
现在的问题是，当我按下删除按钮删除任何记录，我得到的Uncaught TypeError: Cannot read property 'deleteRecord' of undefined错误。所以请告诉我的代码中有什么问题吗？
错误：
Uncaught TypeError: Cannot read property 'deleteRecord&#
浏览 0提问于2017-09-27得票数 0
我试图在我的应用程序中使用，我正在用TypeScript编写该应用程序。我在文档中遵循，在文档中，setTimeout函数似乎被定义为导入ReactTimeout的支柱。我从文档中的这一行示例中收集到这一点：
handleClick = (e) => {
this.props.setTimeout(this.toggle, 5000) // call the `toggle` function after 5000ms
}
但是，当我类似地实现它时，TypeScript会抱怨该属性不存在。这里(本质上)是我的代码。在评论中指出了这一错误：
import * as React f
浏览 0提问于2018-02-10得票数 0
我使用与facebook登录，使用FBjavascripSDK3.3。当我点击注销时，我在我的控制台中得到一个警告。
您正在覆盖当前的访问令牌，这意味着其他应用程序正在期待不同的访问令牌，您可能会破坏一些东西。请考虑将access_token直接传递给API参数，而不是覆盖全局设置。
这里是一个虚拟反应组件，我在这里测试FB登录。
import React, { Component } from 'react'
import config from "../util/config";
export default class LoginTest ex
浏览 0提问于2019-06-11得票数 5
回答已采纳
我正在学习React，我在我的项目中安装了ESLint。它开始给我带来错误，比如：
在引用前一个状态react/无访问状态- setState时，在setstate中使用回调
在React组件中，我有一个构造函数：
constructor() {
super()
this.state = {
currentIdVehicle: null,
currentIdModel: null,
currentIdVehicleFinal: null,
marca: [],
veiculo: [],
mode
浏览 0提问于2019-06-22得票数 5
回答已采纳
2回答
我正在尝试构建一个使用拖放行为的应用程序，而被拖动的组件需要克隆到DOM的其他地方。由于组件已经被挂载，尝试再次挂载它会导致浏览器挂起。
尝试使用cloneWithProps会导致Cannot read property 'defaultProps' of undefined错误。
下面是一个测试案例：
var TestCase = React.createClass({
getInitialState () {
return {
draggingItem: null
}
},
render () {
return <di
浏览 4提问于2014-12-12得票数 2
回答已采纳
我正在学习React，我发现在组件类中有两种不同的方法来定义方法。
一种方法是将方法定义为类方法：
handleCategorySelected(category){
this.setState({
category
})
};
但是首先需要在构造函数方法中将方法绑定到这个。
constructor(props) {
super(props);
this.handleCategorySelected = this.handleCategorySelected.bind(this);
}
在绑定之后，我可以在JSX中使用它。
render() {
浏览 0提问于2018-12-17得票数 0
回答已采纳
我在将函数传递给"onContextMenu“事件时遇到了问题。我想传递事件和参数，但是当我尝试这样做时，我会收到一个错误：
Uncaught TypeError: Cannot read property 'preventDefault' of undefined
这是我的部分代码。我在代码末尾的div中传递函数。
handleContextMenu(event, id){
event.preventDefault()
console.log(id)
//this.setActiveNode(id)
浏览 2提问于2020-05-25得票数 0
回答已采纳
下面是给我一个错误的代码：
import { useState, useEffect } from "react";
type Props = {
setState: (value: string) => void;
};
const useSomeCustomHook = ({ setState }: Props) => {
useEffect(() => {
setState("updated value");
}, []);
};
const SomePage = () => {
const [stat
浏览 7提问于2022-04-10得票数 0
回答已采纳
我正在使用React和阿波罗，我试图用使用useQuery钩子获取的数据初始化状态，但是在加载页面时，我得到了“无法读取未定义的属性‘映射’”。
const { loading, error, data } = useQuery(FETCH_BLOGS);
const [state, setState] = useState(undefined);
useEffect(() => {
if (loading === false && data) {
setState(data.blogs);
}
}, [loading, data]);
if (loa
浏览 2提问于2020-12-15得票数 3
我在React-Axios上遵循了这个文件上传教程，但遇到了一个我似乎无法调试的非常普遍的错误。我对此的反应是全新的。如有任何帮助，欢迎光临(：
TypeError: Cannot read property 'setState' of undefined selectFile
http://localhost:29080/static/js/main.chunk.js:27395:10
27392 | }
27393 |
27394 | selectFile(event) {
> 27395 | this.setState({
|
浏览 0提问于2021-06-15得票数 0
我试着用ReactJS + Material做我的第一个应用，但没有成功。
我唯一想做的就是，当我在酒吧的按钮上点击，显示一个左抽屉。
我有以下代码(App.jsx)：
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'materi
浏览 0提问于2016-07-18得票数 4
回答已采纳
1回答
我在我的React项目中有以下组件。我想要做的是向className元素添加一个<li>属性。将其设置为getSortByClass()方法的返回值，并作为参数传入sortByOptionValue。
import React from 'react';
import './SearchBar.css';
const sortByOptions = {
'Best Match': 'best_match',
'Highest Rated': 'rating',
'M
浏览 2提问于2017-11-24得票数 0
回答已采纳
在react类上，我会写这样的东西
class Myclass extends React.Component {
handleUpdate = info => {
//do the update
}
render() {
return (
<SomeMarkup>
<SomeComponent onUpdate={this.handleUpdate} />
</SomeMarkup>
)
}
}
如果使用函数，我只需编写以下内容
function MyFunction(
浏览 0提问于2019-02-28得票数 13
回答已采纳
我有一个组件，它基本上是一个将雇员添加到数据库中的按钮：
import React, { Component } from "react";
import EmployeeService from "../services/EmployeeService";
class ListEmployeeComponent extends Component {
constructor(props) {
super(props);
this.state = {
employees: [],
};
this.addEmploy
浏览 10提问于2022-08-28得票数 2
我是React世界的新手
我有两个屏幕:股票和条形码。在Stock中，我导航到Barcode的屏幕。当我扫描条形码时，我返回到前一个屏幕，我想用条形码设置输入文本并调用一个函数。在我的示例中，joinData()；
问题是设置输入文本并调用函数。我尝试了一些例子和答案，但是我没有找到或者不明白如何去做。
我在componentDidUpdate()中尝试了一些东西，但失败了，不变的冲突:超过了最大更新深度
Stock.js
import React, {useState} from "react";
import { ScrollView, TouchableWithoutFe
浏览 0提问于2020-03-01得票数 4
我有一个简单的、可重用的DateTimePicker组件，使用的是我正在构建的react小部件。这是非常基本的，但我不知道它为什么会抛出这个错误，尽管我已经在DateTimePicker中容纳了其余的属性，并且扩展到了DateTimePicker道具中。
错误是这样的，看起来道具并没有在DateTimePicker上传播。
Type '{ as?: any; children?: ReactNode; className?: string | undefined; content?: ReactNode; control?: any; disabled?: boolean | unde
浏览 3提问于2020-09-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
