为什么我的React函数组件的方法不起作用
React是一个用于构建用户界面的JavaScript库，它提供了一种声明式的方式来创建可复用的组件。React组件可以是类组件或函数组件。
对于函数组件来说，由于函数组件本身就是一个函数，所以无法使用像类组件那样直接定义方法。但是，React提供了一种叫做钩子函数（hooks）的特性，用于在函数组件中实现类组件中的生命周期方法和状态管理。
如果你在函数组件中定义了方法但无法正常工作，有可能是以下几个原因：
- 方法未被正确调用：确保在组件内部正确调用了该方法。React函数组件中的方法应该直接在组件内部被调用，而不是在组件实例上进行调用。
- 使用了错误的钩子函数：React提供了一些钩子函数，例如useState、useEffect等，用于处理状态和副作用。确保你使用了正确的钩子函数来定义和处理组件的方法。
- 作用域问题：如果你在方法内部使用了组件的状态或属性，确保你在方法内部正确获取它们的值。可以使用闭包或将相关值作为参数传递给方法来解决该问题。
- 组件重新渲染问题：React函数组件会在每次重新渲染时重新执行，如果你的方法依赖于某些数据或状态，确保你正确地管理了它们的变化，并在需要时进行更新。
总结起来，React函数组件中的方法不起作用可能是由于方法未被正确调用、使用了错误的钩子函数、作用域问题或组件重新渲染问题所导致的。通过检查以上可能的原因，你可以尝试解决该问题。
相关·内容
1回答
为什么我们不能在react类组件中使用钩子？React官方只说钩子在类内不起作用，但没有说明为什么它不能工作。
浏览 4提问于2022-01-26得票数 0
回答已采纳
3回答
我在做反应。我刚刚创建了一个名为Input.jsx的组件
import React from "react";
const Input = (label, placeholder) => {
return (
<label htmlFor={label}>
{label}
<input type="text" placeholder={placeholder} />
</label>
);
};
export default Input;
我导入它并在index.js中
浏览 2提问于2020-10-03得票数 1
回答已采纳
2回答
我正在慢慢地学习RXJS，并学习如何在React的上下文中使用它。 我发现的所有Rxjs教程都是从可观察性开始的。这是有道理的。当我尝试在react中使用可观察对象时，它不起作用。相反，我必须创建一个主题，并将价值推向主题。 为什么会这样呢？为什么我不能在React中使用普通的老式观察值？我做错了什么吗？有人能解释一下为什么react中的RXJS必须使用主题吗？ 我意识到这有点模糊，但我还不能理解概念来表达更好的问题。这里有一个例子来说明我正在努力理解的东西。 下面是一个非常简单的组件，它接受输入值中的一个值并显示它。常规的react，没有RXJS。 const InputBox = ()
浏览 17提问于2019-10-14得票数 0
回答已采纳
18回答
我正在用ES6 (使用BabelJS)编写一个简单的组件，但函数this.setState不起作用。
典型的错误包括以下内容
无法读取未定义的属性“”setState“”
或
this.setState不是一个函数
你知道为什么吗？代码如下：
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
浏览 103提问于2015-04-11得票数 239
回答已采纳
为什么按钮onClick函数会起作用？
为什么{this.test.bind(this)}不起作用？
如果你点击按钮按钮，事件可以正常并跳回
{this.test.bind(this)}不起作用。
如果使用{this.test()}，它可以工作，但会出现一些错误
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a p
浏览 19提问于2017-02-26得票数 0
回答已采纳
我学习ReactJS并尝试通过“清除ReactJS”来使用它。
这是我的简单代码：
class MyList extends React.Component{
constructor(data){
super(data)
this.text = data.text
}
render(){
return React.createElement("h1", null,
this.props.text)
浏览 0提问于2018-09-17得票数 0
回答已采纳
我设置了一个新的react项目，由于某种原因，没有调用componentDidMount方法。
我已经通过在console.log中调用componentDidMount来验证这种行为，但是在控制台中看不到它的输出。
此外，this.setState()不起作用。
我很难理解为什么componentDidMount没有被调用。我试着使用了React "v0.14.0“和"v0.14.3”。
为什么“componentDidMount”没有被调用？
代码：
var React = require('react');
var RecipePage = React.
浏览 1提问于2015-11-30得票数 68
回答已采纳
2回答
不知道为什么，但是当从另一个函数访问方法时，模式没有关闭。我可以在组件中对该方法进行控制台日志记录，但该方法就是不起作用。 这是closeModal()函数所在的主ReviewsScreen.js import React, {Component} from 'react';
import {Modal} from 'react-native';
import {TouchableOpacity} from 'react-native';
import {View, Text, StyleSheet} from 'react-nativ
浏览 14提问于2021-04-09得票数 0
我希望这个切换能正常工作，但不知怎么的，组件<A/>的构造函数只调用一次。
import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
state = { toggle: false };
render() {
const { toggle } = this.state;
return (
<div>
{toggle ? <A p
浏览 0提问于2018-09-19得票数 4
回答已采纳
2回答
我尝试访问我的组件中的一些引用。但是我在控制台中有这个错误。withRouter.js:44 Warning: Stateless function components cannot be given refs (See ref "pseudo" in FormInputText created by RegisterForm). Attempts to access this ref will fail.
下面是我的组件：
class RegisterForm extends React.Component {
render() {
return (
浏览 0提问于2016-07-28得票数 8
回答已采纳
1回答
我4天前就开始学习反应母语了。我试图将一个属性this传递给另一个Scene，但是，一直遇到这个错误 _this.setState is not a function。我相信这不是一个重复，因为我已经阅读了这两个堆栈的答案和他们的解决方案似乎没有帮助我。我有一点不同的设置，虽然，所以认为，也许这可能是问题。
我知道React在这一年里发生了很大的变化，因为(并且经常这样做)这些问题得到了回答，所以我认为这也许就是为什么它们对我不起作用的原因。
import React, { Component } from 'react';
import { StyleSheet, Tex
浏览 1提问于2016-12-08得票数 1
回答已采纳
import React, { Component } from 'react'
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
export default class App extends Component {
constructor(props){
super(props);
state = {
count: 0
}
}
render() {
const increase = () => {
this.set
浏览 3提问于2022-10-15得票数 0
2回答
我正在使用来实现React中的表结构，我试图为此添加编辑按钮和onClick函数，但它不起作用。
我的代码:
render(){
function test(){
alert("asd");
}
function imgFormatter(cell,row) {
return '<a href="#" onClick="test();"><i class="fa fa-pencil" aria-
hidden=&
浏览 2提问于2017-07-10得票数 1
回答已采纳
我正在创建一个简单的React应用程序，我知道我应该在这个例子中使用state，但是我找到了一个这样的例子，我决定尝试一下。现在我不知道为什么这不起作用了，我想了解我为什么会收到这条信息。我已经搜索了很多，所有有类似错误的案例似乎都很具体。我收到一条错误消息：
Error in /~/src/Form.js (14:26)
Cannot read property 'userNameInput' of undefined
这是我的代码: App.js：
import React from 'react';
import './style.css'
浏览 4提问于2021-08-06得票数 2
回答已采纳
2回答
我正在尝试将state title值更改为我在路由器中提供的值，但我不知道为什么它不起作用。这段代码被编译了，但是标题一直是一个空字符串。
class Header extends React.Component {
state = {
title: '',
};
updateTitle(title) {
this.setState({ title });
}
render() {
const { title } = this.state;
return (
<Typography>
浏览 0提问于2018-11-06得票数 1
我有一个关于React和JSX的问题。
下面的主要组件代码工作正常：
function App(){
return (
<Hello />
)
}
然后我定义了一个函数组件，并在其中调用了一个函数。为什么它不起作用？
function Hello(){
f();
}
function f(){
return(<h1>hello</h1>);
}
然而这确实是可行的：
function Hello(){
return(<h1>hello</h1>);
}
浏览 1提问于2019-10-08得票数 5
React.render(<MyComponent/>, mainNode, function() {
console.log('2');
});
console.log('1');
打印
2
1
此外，回调中的scrollTop()也不起作用。如果我在render()返回之后调用它，它就可以工作。
React.render()是同步的吗？
函数返回时会呈现DOM吗？
什么时候调用回调？我想在回调中做什么？
浏览 0提问于2015-06-04得票数 19
回答已采纳
我不熟悉React，我非常困惑，日夜不停地思考这个问题，几乎我所有的头发都掉下来了，这就是为什么在使用类创建组件时，总是扩展React.Component类的原因。
但是在React.Component函数组件和其他方法中，我们没有做任何这样的事情来将创建的组件推入到类中。因此，主要的问题是，什么是React.Component类?为什么我们总是将新组件作为使用扩展的子组件添加到它，以及为什么我们不能在没有在类组件中使用扩展或不扩展React.Component类的情况下在react中创建本机组件。那么，React.Component类是什么呢？内部发生了什么？
我会非常感谢这个人，他会用例子
浏览 0提问于2018-10-01得票数 5
回答已采纳
我想用react-indiana-drag-scroll将我的组件初始化为一个初始滚动，但它不起作用，我不知道为什么。
你可以在上找到代码。
我想初始化红线(当前时间)上的滚动，但scrollTo函数在此代码中不起作用。
浏览 10提问于2020-03-04得票数 1
回答已采纳
我有点困惑，为什么我们在react中创建类的时候需要导入组件？为什么我们不能像在函数组件中那样简单地导入react呢？
浏览 2提问于2020-06-14得票数 0
所以我的问题是，当我在终端上做“创建-反应-应用程序”时，它会像它应该创建的那样创建所有东西，但是在App.js中，它应该导入React，并在默认情况下从"react“导入{ Component }。
因为现在它这样做了：
import React from "react";
而不是这个：
import React, { Component } from "react";
而且它不是在做：class App extends Component { ... }，而是：function App() { ... }
因此，当我尝试使用state时，它只是无法编
浏览 0提问于2019-11-15得票数 0
2回答
我想知道我是否可以在react中做到这一点，我想从JS文件中调用react组件的函数或方法，这样我就可以更改该组件的状态。
例如，我有以下三个文件
第一个App.js
import React,{Component} from 'react';
import Login from './Login';
class App extends Component{
constructor(){
super();
this.state = {session:false}
}
changeStateSession
浏览 3提问于2018-03-07得票数 1
我正在使用react.js，并在构造函数中添加了this.setState()，但它不起作用。这是我的代码-
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
age: '18'
}
this.setState({id: 'name'});
}
render(){
return (
<div>
<p>{this.state.i
浏览 9提问于2020-11-09得票数 2
3回答
我在多个地方读到，React中的无状态函数不应该具有内部功能。为什么会这样，虽然它能工作？
const Foo = () => {
let bar = () => {
return <span>lorem ipsum</span>
}
return <div>{bar()}</div>
}
这个很管用。但是，为什么不应该这样做呢？
浏览 0提问于2018-05-18得票数 0
回答已采纳
1回答
非常简单的示例:我的App.js文件读取
import React from 'react';
import Test from './component/Test';
function App() {
return (
<div className="App">
<Test/>
</div>
)
}
export default App;
我的Test.js文件读取
import React, { Component } from 'react'
cl
浏览 1提问于2020-06-25得票数 0
回答已采纳
我正在学习如何使用React-TypeScript，我对React.FC和泛型如何协同工作感到困惑。 因此，我有几个与以下代码相关的问题(一个返回列表项的函数组件)： 1.)你必须将道具作为泛型传递吗？或者你可以简单地写下 const TodoListItem: React.FC = (props) => {
//code
} 2.)todo是如何从<TodoListItemProps>中解构出来的？ 3.)为什么没有定义返回类型？它不应该写成： const TodoListItem: React.FC<TodoListItemProps> = ({todo})
浏览 37提问于2020-12-08得票数 0
当用户单击remove按钮时，我试图删除子元素(Note)。删除方法在父级(板)上，我试图通过道具将其传递给子程序，但它不起作用。
我尝试使用简单的删除，this.remove --没有定义的删除，或者这个，this.remove.bind( this )什么都不起作用；位置:eachNote(文本，i)方法
import React from 'react';
import ReactDOM from 'react-dom';
class Note extends React.Component{
constructor(props){
浏览 5提问于2016-08-25得票数 0
回答已采纳
我是React的新手，我想清楚地知道要使用哪一种，当涉及到组件时，我可以看到有两种类型。
功能组件:
import React from 'react'
const userInput = (props) => {
return(
<div>
<input type='text' onChange={props.nameChanged} value={props.username}></input>
</div>
)
};
expor
浏览 0提问于2018-06-27得票数 14
回答已采纳
1回答
我创建了一个react组件，它不会显示输入字段的标签。由于label文本的长度是可变的，所以我试图动态地更改字体大小，以便文本适合固定大小的容器。
然而，不知何故，当函数被调用时，我的字体大小没有被更新，我也不知道为什么。
这是我的代码：
import React from "react";
class NewDrive extends React.Component {
constructor(props) {
super(props);
this.myOutputRef = React.createRef();
this.myOutputCon
浏览 0提问于2021-11-24得票数 0
回答已采纳
我有一个像这样的高阶分量
// higherOrderComponent.js
const HigherOrderComponent = Component => class extends React.Component {
shouldComponentUpdate (nextProps, nextState) {
return false
}
render () {
return <Component {...this.props} />
}
}
export default HigherOrderComponent
// myCo
浏览 1提问于2016-08-19得票数 3
我的代码已经成功编译，没有任何错误，但是在我的浏览器上，我得到的是这个，而不是输出的Target container is not a DOM element。为什么会这样呢？我遗漏了什么？
我尝试过React.createElement，但它不起作用。
import React from 'react';
import ReactDOM from 'react-dom'
class Greeting extends React.Component {
constructor (props){
super(props);
this.setSt
浏览 1提问于2019-08-01得票数 0
4回答
我在学反应。我正在构建计数器应用程序。我认为下面的代码和react中的状态是相同的。console.log打印正确，但在html中它不会更改值。你能解释一下为什么密码不起作用吗？
import React, {useState} from "react";
let count = 0;
const Counter = (props) => {
const setCount = ()=> {
count = count + 1;
};
return (
<div>
<b
浏览 2提问于2020-03-12得票数 0
回答已采纳
可以为函数设置defaultProps吗？下面的代码不起作用。它不喜欢“这个”。我尝试将defaultProps绑定到'this'，或者2_将handleClose绑定到'this'，都不起作用。我使用ES6类。
SaveDialog.propTypes = {
note: React.PropTypes.string,
onCancel: React.PropTypes.func,
onSave: React.PropTypes.func,
onEditChange: React.PropTypes.func
};
SaveDialog.de
浏览 3提问于2016-02-16得票数 11
回答已采纳
任何帮助或提示都将不胜感激！ 在onFormSubmit()中，我收到错误:无法读取未定义的属性'state‘。为什么下面将onFormSubmit转换为箭头函数可以解决这个问题？在stackoverflow中，url :Cannot read property 'state' of undefined 说明了如何解决问题:正如有人已经提到的，您必须像他那样在构造函数或onClick中绑定方法 简单地说，绑定方法是什么意思？ onFormSubmit = event => {
event.preventDefault();
console.lo
浏览 29提问于2021-01-01得票数 0
回答已采纳
我有一个关于ReactJS和组件的问题，特别是关于函数如何在组件系统中交互的问题。 在此示例中： // Index.js
import React from ‘/reactʼ;
import ReactDOM from ‘/react-domʼ;
import App from ‘./App.jsʼ;
ReactDOM.render(<App />, document.getElementById(‘rootʼ));
// App.js
import React from ‘/reactʼ;
class App extends React.Component {
浏览 12提问于2020-07-03得票数 0
在react类组件中，应该使用const/let来声明箭头函数，还是应该发出它们：
class ReactComp extend Component {
const sayHello = () => {
return 'Hello';
}
sayBye = () => {
return 'Hello';
}
render() {
<div>
{this.sayHello}
浏览 1提问于2018-01-23得票数 6
回答已采纳
3回答
在javascript类constructor()中获取数据是一种好的做法吗？
例如，在react类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但没有人质问为什么我们不能在constructor()中这样做。
这个问题与javascript类有关，不仅仅是react。
浏览 3提问于2019-03-15得票数 13
你好，我是一个新的程序员，最近我开始在react中编码，但我的JavaScript代码有这个问题。导入不起作用。 import React from 'react';
import './App.css';
import { hello } from '/components/hello.js';
function App() {
return (
<div className="App">
<header>
<p>
<hello&g
浏览 19提问于2020-10-19得票数 0
下面您可以看到有史以来最简单的组件，它使用钩子呈现功能组件。
import React, { Component, useState } from 'react'
export default class ImageList extends Component {
render() {
return (
<div>
{RenderImages()}
</div>
)
浏览 0提问于2019-11-30得票数 5
回答已采纳
3回答
我有一个简单的hello world代码：
import React from 'react';
class ShoppingList extends React.Component {
getComponent(event) {
console.log('li item clicked!');
event.currentTarget.style.backgroundColor = '#ccc';
}
render() {
return (
&
浏览 3提问于2017-07-26得票数 0
2回答
我错过了什么让它发挥作用？我想答案很简单，但实际上，我开始反应，仍然不知道为什么它不起作用。如果有人知道的话，我非常感激。
谢谢。
import React from 'react';
var a=30;
var b=20;
function App() {
return (
<div>
<h1>if or else</h1>
<c/>
</div>
);
}
export de
浏览 1提问于2020-06-19得票数 0
回答已采纳
1回答
为什么它被称为功能组件？
、、、、
一个快速的谷歌搜索显示，我没有被直接问到的问题，所以我在这里问它。至于它的价值，我正在学习react，我来自C++背景，据我所知，“功能组件”不是一件事。
从教程中可以看出，这似乎是一个功能组件的barebone示例。
import React from 'react';
function App()
{
const greeting = 'Hello Function Component!';
return <h1>{greeting}</h1>;
}
export default App;
在我看来，
浏览 0提问于2019-09-27得票数 -1
回答已采纳
我有一个简单的反应应用程序，其中包括一个websocket。现在我想知道为什么每次打开react应用程序时，websocket连接总是被打开两次。
经过一些调查，我发现它实际上是我的根组件'App‘，它是以某种方式两次构建的。我在我的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker fro
浏览 3提问于2020-05-01得票数 0
回答已采纳
为什么这不像预期的那样起作用？有时起作用，有时不起作用-我想不出这个办法。使用ScrollIntoView的代码片段是从另一个带有另一个页面的js文件中复制的，在那个页面中，它工作得很好吗？ID的refTP和refPP在ReferencesPP和ReferencesTP的div标记中找到
import React, {useState} from 'react'
import ReferencesPP from './referencesPP'
import ReferencesTP from './referencesTP'
import &#
浏览 1提问于2021-02-04得票数 2
回答已采纳
我正在学习一个React教程，我不明白为什么我会有一个bug。
我正在尝试使用React添加这个按钮元素：
<button onClick={this.add.bind(null, 'new item')}>New Item</button>
事件处理程序应调用位于不同React类中的以下函数：
add: function(item) {
var arr = this.state.comments;
arr.push(item);
this.setState({comments: arr});
},
我被告知这是不
浏览 7提问于2017-02-07得票数 0
2回答
我有最简单的应用程序。有一个父<App>组件和一个子<MyChildOne>组件。两者都是基于阶级的。
有谁能解释一下为什么要两次调用的呈现函数？
这是我的<App>代码：
import React from "react";
import "./App.css";
import MyChildOne from "./MyChildOne.js";
class App extends React.Component {
render() {
return (
<div>
浏览 2提问于2020-04-10得票数 1
我正在尝试使用这个指南来实现一个反应表：
在指南中的某一点上，它说要使用React.useMemo创建数据：
const columns = React.useMemo(
() => [
{
Header: 'Column 1',
accessor: 'col1', // accessor is the "key" in the data
},
{
Header: 'Column 2',
accessor: 'col2',
浏览 2提问于2020-06-19得票数 0
下面是我的具有jsx代码的jsxVarable
let JsxVarible = (
<div>
<h1>Hello this is from Jsx</h1>
</div>
)
ReactDOM.render(JsxVarible, document.getElementById("app"));
EveryThing工作正常
let JsxComponent = () =>(
<div>
<h1>We are rendering the JsxCompon
浏览 0提问于2020-04-24得票数 0
1回答
我在我的react应用程序中实现了一个简单的动画Js文本动画；我还有其他的动画Js项目，它们执行得很完美，但我只是不认为这个有什么问题，以及为什么它不能工作。
TextColourChangeLoader.js
import React from 'react';
import './styles/TextColourChangeLoader.css';
import anime from 'animejs';
export default class TextColourChangeLoader extends React.Compone
浏览 4提问于2020-01-15得票数 0
我正在尝试将事件处理程序传递给父组件，因此我编写了以下代码： import React, { useState } from "react";
export default function App() {
const [val, setVal] = useState("");
function handleChange(event) {
console.log(event.target);
setVal(event.target.value);
}
return (
<div className=
浏览 11提问于2020-10-25得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
