React JS -如何设置变量内部变量的状态？
在React JS中，我们可以使用useState钩子来设置变量的内部状态。useState是React提供的一种钩子，它允许我们在函数组件中存储和更新状态。
要设置变量的内部状态，首先需要导入useState钩子：
import React, { useState } from 'react';
然后，在函数组件中声明一个变量和一个setter函数来存储和更新状态。setter函数通过调用useState钩子时返回的数组的第二个元素获得。
const MyComponent = () => { const [count, setCount] = useState(0);
// 其他组件代码...
return ( <div> <p>当前计数: {count}</p> <button onClick={() => setCount(count + 1)}>增加计数</button> </div> ); }
在上面的代码中，useState(0)表示初始化count状态变量为0。setCount是一个函数，可以用来更新count的值。当点击按钮时，onClick事件会调用setCount函数，并将count的值加1。
这是一个简单的示例，展示了如何设置变量的内部状态。你可以根据自己的需要，使用useState钩子来管理更复杂的状态。
相关·内容
我是React JS的新手，我正在尝试了解如何从文件导出变量并将其导入到另一个文件中。我尝试的是这样的： 文件App.js： import React from 'react'
function App() {
[hi, setUpHi] = useState('Hello World')
return (
<div className='App'>
<Test />
</div>
);
}
export default App
export {hi} 文件
浏览 13提问于2021-09-01得票数 0
回答已采纳
1回答
我有两个简单的反应组件：
// Array.js
import React from 'react'
import PropTypes from 'prop-types'
const factor = 10
const Array = ({array}) =>
<div className="array">
{array.map(v => v * factor)
.map((h, i) => <Column key={i}
浏览 3提问于2017-10-29得票数 2
回答已采纳
我很难将状态从子组件ConceptTabs.js传递到父组件App.js，然后再传递到另一个子组件Audio.js
我有一个具有如下结构的react应用程序：
src/
App.js
components/
header.js
Audio2.js
ConceptTabs.js
App.js
import React from "react";
import Header from "./components/header";
import ConceptTabs from "./components/ConceptT
浏览 3提问于2022-01-03得票数 0
1回答
还原剂/上下文应用程序
、、、
所以我用还原器创建了一个上下文。在还原剂方面，我有一些逻辑，在理论上应该是可行的。我有，它正在迭代来自data.js的数据，并且有一个按钮，我还有一个windows组件，它正在迭代数据。无论如何，问题是当我单击中的按钮时，它应该在和中删除data.js的项/id，但是当我单击它时什么都不会发生。如果有人能帮我，我会非常感激的。亲切的问候
App.js
const App =()=>{
const[isShowlOpen, setIsShowOpen]=React.useState(false)
const Show = useRef(null)
functi
浏览 4提问于2021-02-16得票数 0
回答已采纳
2回答
Splice()方法无效
、、、
在我的React.js应用程序中，我对splice()方法有一些问题。
那么，.删除现在不起作用。这里怎么了？守则的一部分：
class CardList extends React.Component {
static propTypes = {
students: React.PropTypes.array.isRequired
};
// ADD DELETE FUNCTION
deletePerson(person) {
this.props.students.splice(this.props.students.indexOf(person), 1)
浏览 2提问于2016-04-17得票数 2
回答已采纳
2回答
我将从我的“react”项目中调用“https://www.mql5.com/en/economic-calendar/widgets”处的代码。但是，我从componentDidMount中调用了'script‘，但我不知道如何调用一个名为'new economicCalendar’的对象。如果你能告诉我如何解决这个问题，我将不胜感激。 <script type="text/javascript" src="https://c.mql5.com/js/widgets/calendar/widget.js?6"></scrip
浏览 24提问于2020-04-05得票数 1
2回答
ProductTable.js
从“react”导入React，{ useEffect，useState }；
function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.d
浏览 7提问于2022-11-08得票数 0
我有一个购物车，它使用map根据数组对象呈现几张卡片。每张卡片都包含商品价格，点击按钮可以增加的项目数量，以及项目总价=价格*数量。底部有一个信息栏，当用户点击add按钮时，我想显示所有卡的总价。下面是一个有用的示例：
以下是代码：
Home.js：
import React, {useState} from 'react';
import Card from './Card';
import Infobar from './Infobar';
const Home = () => {
const dummyData = [
浏览 2提问于2020-09-17得票数 0
回答已采纳
我正在尝试有一个食物过滤页面，在那里用户按下按钮来指示他们的偏好，这样在确认时，我将能够使用键"area", "cuisine" and "price"将用户的偏好存储为对象上。在尝试了各种组合之后，我得到的记录对象只反映了第一次更新时的更改，即区域。{"area": "South", "cuisine": Array [], "price": -Infinity }而不是{"area":"South", "cuisine":
浏览 23提问于2020-06-18得票数 0
回答已采纳
1回答
我正在ReactJS上做一个小程序。这个程序调用一个文本文件，检查它的条件，并将结果记录到一个数组中。当单击按钮时，数组应该显示在页面上。由于某种原因，只显示数组的最后一个元素--我需要显示整个元素。我有什么办法让这件事起作用吗？
我的想法是，我需要一个数组的所有植物，其中包含“花”，并记录到屏幕上。
plants.txt
sunflower
rose
elderflower
hibiscus
App.js
import React, { Component } from 'react';
import plantsFile from 'plants.txt';
浏览 0提问于2018-05-20得票数 0
回答已采纳
1回答
在AllWords.js中，我有一个非常直观的react组件：
import React, { useEffect, useState } from 'react';
import consts from '../../constants/Constants.js';
function AllWords() {
const [words, setWords] = useState([]);
async function fetchData(){
const response= await fetch(consts.FETCH_UR
浏览 0提问于2021-07-29得票数 1
当我尝试使用react路由器时，我得到了这个错误，我注意到在我的reactjs环境中一切正常，但是当我运行npm run build file时，react路由器不工作，
这是一个完整的错误，我看到我的控制台需要修复它。
index.js:1 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 a
浏览 3提问于2020-02-13得票数 0
Reactjs.如何在按钮和页面上隐藏结果
我知道这个问题听起来很基本，但我只是绝望了。下面的Reactjs代码显示用户记录。
这就是我想要达到的目标。
在以下情况下，如何使用reactjs隐藏结果：
1.)用户单击页面上的任何位置。
2.)当用户有隐藏按钮时。
有人能帮我吗。谢谢
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="build/react.min.js"></script>
<scr
浏览 0提问于2018-12-07得票数 0
回答已采纳
我设置了一个应用程序，它有一个输入框和一个标题。标题输入更改onChange，更新显示的标题。状态是一个带有数组{title:[{title: 'Welcome', feature: 'test'}]的对象，我成功地将setState作为标题，但是特性随后变得未知。见代码：
APP.JS
import React from "react";
import Header from "./Header";
export default class Layout extends React.Component {
construc
浏览 3提问于2017-09-09得票数 0
回答已采纳
我正在尝试使用react-plugin-react-hooks。
我有一个向window (onScroll)添加事件侦听器的useEffect。onScroll使用window.pageYOffset。
function onScroll() {
if (window.pageYOffset > 0) {
setFoor(bar)
} else {
setFoor(baz)
}
}
现在在useEffect中，我有：
useEffect(() => {
window.addEventListener('scrol
浏览 1提问于2019-11-06得票数 0
我正在尝试使用componentDidMount将axios中的数据设置为组件状态，但它不起作用
我通过这个简单的代码检查了它
import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';
import "./styles.css";
class App extends Component {
constructor(props){
super(props);
sta
浏览 1提问于2019-11-04得票数 1
2回答
我有一个单页面应用程序，其中有一个加载用户数据的react组件。注销后，此数据将持久化。除了清除我的redux状态之外，我还应该如何清除这个组件的状态？在redux reducer中是否以某种方式清除了单个组件的状态？ 现在，我像这样处理状态的redux清除： // reducers/auth.js export default function authReducer(state = initialState, action) {
switch (action.type) {
...
case AUTH_LOGOUT_USER:
浏览 25提问于2020-01-14得票数 1
我正在使用React.js和Strophe.js开发web，我遇到了很大的问题。
XMPP连接存储在单个对象中，但棘手的是，连接状态的更改由类处理，其中我可以存储真正的处理程序(因为显示连接状态将有两个不同的视图，而Strophe.OnConnection处理程序在初始化后不能更改)
我想要实现的是把组件传递给一个函数，用新的道具呈现自己，类似的东西。
var statusHandler = {
handler:"",
setStatus: function(status) {
React.render(<this.handler valu
浏览 0提问于2015-05-14得票数 0
回答已采纳
正如标题所述，我正在试图弄清楚如何在我的自定义团队应用程序内的页面上获得我的teamId和userPrincipleName。我遇到过很多不同的信息，但我完全是Javascript和React的初学者，所以我不知道如何正确地应用它。 如何在团队应用程序的tab.js页面上显示teamId和userPrincipleName？ 我的代码： // Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
import React from 'react'
浏览 20提问于2021-06-15得票数 0
回答已采纳
2回答
在单击<button>时，调用一个单击处理程序，其中返回一个react组件<ConfirmationDialog>。但是<ConfirmationDialog>并没有被调用和显示。为什么？
// App.js
import ConfirmationDialog from "./ConfirmationDialog";
export default function App() {
const handleClick = () => {
console.log("handle click");
ret
浏览 3提问于2022-08-09得票数 0
回答已采纳
1回答
我尝试通过React.js代码显示单个用户的JSON API结果。这是我执行console.log()时得到的JSON响应。 {"id":1,"email":"test.k@gmail.com","mobile":+989898989,"name":"testname K","address":"my address here, India","gender":"1","tagline":"Friendly t
浏览 4提问于2021-03-29得票数 1
回答已采纳
我正在做一个反应项目并使用wavesurfer.js。当我点击play按钮时，我将道具播放从false更改为true，用于使元素实际播放的方法是visual.playPause()；但是，我不确定如何在创建变量(在initWaveSurfer函数中创建的可视变量)之后获得对变量的引用。任何帮助都会是惊人的！！
var React = require('react');
var ReactDom = require('react-dom');
var reactWaveSurfer = React.createClass({
getInitialState:
浏览 2提问于2016-06-28得票数 1
回答已采纳
1回答
组件从getConvForNum上的服务器获取数据，但不知何故进入了无限循环。即使我只保留render()和这个函数，它也会一直向服务器发送GET请求。 OpentTickets.js import React from 'react';
import axios from 'axios';
import {Button, Accordion, Card, Form} from 'react-bootstrap';
export default class PersonList extends React.Component {
st
浏览 37提问于2020-02-03得票数 0
回答已采纳
1回答
模态不像预期的那样接近
、、、、
期望行为
单击Signin，Modal将打开
单击模式外部或按esc，模态关闭。
实际行为
单击Signin，Modal不会打开，因为onClose会立即启动
这里是程序的流程：
App.js被呈现，头被呈现，一个openSignIn回调道具被传递给它，当用户单击SignIn链接时触发openSignIn回调函数，当回调被调用时，它将导致App.js中的signinOpen变为真，signinOpen作为在注册组件中的支柱open与closeSignin回调函数一起传递，当Registration.js收到一个支柱时，它将调用componentWillReceive
浏览 0提问于2018-02-02得票数 1
3回答
我有这样一段简单的代码：
ReactDOM.render(<Change />, document.getElementById('app'));
function Change() {
const [i, setI] = React.useState(0);
let rnd = 9;
if (i !== rnd) {
setTimeout(() => {
setI(i + 1);
}, 500);
}
React.useMemo(() => {
浏览 4提问于2020-05-17得票数 0
回答已采纳
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
回答已采纳
我创建了一个名为"CommonStyleGenerator“的组件，以生成具有诸如高度、宽度和bgColor等键的简单样式对象。我已经在组件中创建了文本字段，每当文本在任何文本字段中发生更改时，我都会使用更改的字段键调用onStyleChange，并且在父组件中存储更改后的值。
下面是CommonStyleGenerator.js组件代码：
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-nat
浏览 1提问于2021-01-26得票数 0
回答已采纳
我是新的反应发展，经过一些实践，我正在创建一个表单使用React和在控制台显示了一些错误，我是第一次看到这种类型的错误，所以请您帮助我理解这一点？我怎么能解决这个问题？我在哪里搞错了？
import React, { useState } from "react";
const ControlledInputs = () => {
const [username, setUsername] = useState();
const [email, setEmail] = useState();
const ha
浏览 1提问于2021-12-06得票数 0
我正在使用来流一些视频。不幸的是，当用户点击视频时，我在传递视频细节时陷入了困境。(我知道这一警告，将很快通过在缩略图中添加一个索引来解决这个问题)。
问题是(它也在帖子中间，但我担心它会丢失)：为什么hss我的searchedValue.videos变成了未定义的？
我得到了一个工作版本:当我点击一个视频的缩略图，我得到了预期的结果。
这是它的代码：
App.js
import React, { useState, createContext } from "react";
import NavBar from "./NavBar";
import yo
浏览 5提问于2020-06-21得票数 0
回答已采纳
我不知道如何使用异步调用和promise处理来传递我的结果变量
下面是我使用过的代码：
import React from 'react';
import {result} from './run.js';
export default class Films extends React.Component {
constructor(props){
super(props)
this.state = { data: 'constructor' }
console.log('cons')
}
浏览 1提问于2019-10-14得票数 1
我正在开发一个React组件，它使用拖放来上传基于本教程的文件：https://blog.logrocket.com/create-a-drag-and-drop-component-with-react-dropzone/，我对React Hooks组件类型不是很熟悉。 在我的定制中，我希望在文件被拖放到该区域后隐藏拖放容器，而只显示文件容器。 我为此创建的状态是const [isDropped, setIsDropped] = useState(false); 这是在文件被放入以下位置时显示该文件的函数： const fileDrop = (e) => {
e.prev
浏览 11提问于2020-08-21得票数 0
react_devtools_backend.js:4026警告:组件正在将受控输入更改为不受控制。这很可能是由定义的值更改为未定义的值引起的，这种情况不应该发生。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。代码：
import React, { useState } from "react";
const App = () => {
const [state, setState] = useState({ name: "bilal", password: "1234" });
const handlrCha
浏览 3提问于2022-09-28得票数 0
我一直在调查React.js我想知道React.js是否/什么时候依赖于不变性来做出决策。我有点理解为什么它会帮助开发人员(在React上下文中的细化将受到赞赏)，但是它如何帮助React本身呢？
它是如何在虚拟DOM、shouldComponentUpdate等方面发挥作用的呢？
浏览 0提问于2019-10-20得票数 0
1回答
我有这个React.js应用程序，这是一个简单的购物车应用。
问题是，我试图使用Jest和Enzyme对应用程序的Enzyme进行单元测试，但它似乎不起作用。下面是我的Todo.test.js单元测试：
import React from 'react';
import { shallow } from 'enzyme';
import Todo from '../components/Todo';
import { configure } from 'enzyme';
import Adapter from 'enzy
浏览 0提问于2018-05-07得票数 0
回答已采纳
2回答
我是新来的反应。我在做一个小项目。我必须显示一个表(listFeatures.js)，并且可以通过表单提交(addTech.js)将行添加到表中。但是，政府的变化并没有得到反映。在这种情况下，我可能觉得useEffect()可以帮助我，但我不知道如何正确地使用它。有人能帮忙吗..。
代码给出的
app.js
import React, { useState, useEffect } from 'react'
import ListFeatures from './components/ListFeatures/listFeatures'
import AddTe
浏览 4提问于2021-12-28得票数 0
回答已采纳
1回答
如何导出react.js的状态变量？这意味着我们在react.js中有一个状态变量，并且这个状态变量需要在另一个组件中，然后我们如何导出该组件。
浏览 4提问于2022-01-26得票数 -2
1回答
我是MapContainer.js
import React, { useEffect, useState } from 'react';
import { GoogleMap, LoadScript, Marker} from '@react-google-maps/api';
const MapContainer = () => {
const [ currentPosition, setCurrentPosition ] = useState({});
const success = position => {
浏览 5提问于2020-09-12得票数 0
我正在为我的基本待办事项列表应用程序创建一个删除函数；但是，当我尝试从列表中删除某个项目并再次设置状态时，我遇到了一个问题。它一直给我一个this.setState is not a function错误。问题出在deleteTodo(id)中。
我的TodoStore.js
import { EventEmitter } from "events";
import dispatcher from "../dispatcher";
import * as TodoActions from "../actions/TodoActions";
c
浏览 0提问于2019-03-14得票数 0
我在index.html页面中有一个JS全局变量，我需要在react JS应用程序中调用这个变量，我尝试将结果存储在本地存储中，然后从react应用程序中调用它，第一次在react应用程序中调用localstorage时返回"null“值，但是如果我刷新页面显示的值，我如何从第一次获取值，而不刷新页面？！
<script>
var langObject='';
$.getJSON('http://getJSON.com/en', function(data) {
langObject = data;
localStorage.
浏览 1提问于2016-12-10得票数 0
我正在了解React中的ErrorBoundaries，并想知道为什么以及如何在getDerivedStateFromError方法中设置状态？
// REACT
import React from 'react';
export class ErrorBoundary extends React.Component {
state = {
isThereError: false
}
static getDerivedStateFromError(error) {
return {
isThereError: true
}
浏览 3提问于2021-10-05得票数 1
回答已采纳
2回答
在useRef里面发生了什么？
、、、、
我正在用react.js创建一个滑雪板。我需要在这里自动调用nextSlide函数。所以，我用了useEffect钩子。我有这样的密码
const [current, setCurrent] = useState(0);
const length = slides.length;
const timeout = useRef(null);
useEffect(() => {
const nextSlide = () =>
setCurrent((prevState) => (prevState === length - 1 ? 0 : prev
浏览 2提问于2021-04-28得票数 0
我花了一天的大部分时间来解决这个令人讨厌的错误。
我正在使用redux-工具箱、MSW、RTK查询，并对Libary进行响应测试，目前我正忙于编写一个测试简单登录流的集成测试。
我遇到的问题是，我在一个测试套件中测试两个不同的场景，一个是成功的登录，另一个是失败的。
当我一次运行一个时，我没有问题，但是当我同时运行时，我会得到以下失败场景的错误。
TypeError: Cannot convert undefined or null to object
at Function.values (<anonymous>)
59 | (state
浏览 9提问于2021-09-23得票数 0
回答已采纳
1回答
正如下面的代码所示，如何使两个相关的值同步，而不产生无限循环？
如果使用value1 = 3的设置器，我希望更新value2 = '3‘。
import React, {useState, useEffect} from 'react';
const [value1, setValue1] = useState(1);
const [value2, setValue2] = useState('1');
useEffect(() => {
setValue2(`${value1}`);
}, [value1]);
useEffect(
浏览 2提问于2021-04-08得票数 0
回答已采纳
2回答
我使用useState钩子编写了一个功能组件，该组件本身运行良好，但我在测试它时遇到了问题。我不明白如何在组件中创建初始状态。我尝试过多种方法来嘲弄useState，但没有一种方法奏效：
describe('<Component/>', () => {
beforeEach() = > {
jest.spyOn(Readt, 'useState').mockImplementation( () => React.useState(['test']));
//Also tried
浏览 4提问于2020-02-03得票数 1
回答已采纳
我是反应新手。我试着找了好几个小时，但还是不明白。
我从App.js那里得到(道具)作为布尔值。是否按下按钮。
我想:如果是假的，我想把svg的高度更改为300 If，其他的更改为20 If。应该是动画片。如何将动画与弹簧绑定？
我应该让康斯特像navAnimation一样吗？
我是App.js
import React, { Component, useState } from 'react';
import {useSpring, animated} from 'react-spring';
import Subject from "./compon
浏览 1提问于2019-10-07得票数 2
回答已采纳
1回答
所以我想在你点击一个按钮的时候制作一个动画，在js中我可能会这样做：
var x = document.GetElementById("inputBox");
function changeToRegister(){
x.style.justify-content: flex-start;
}
但是当我在react中尝试这样的东西时
const changeToRegister = () => {
var x = document.getElementsById("inputs");
x.style.justify-content
浏览 20提问于2021-06-07得票数 0
回答已采纳
我使用了一个使用的结构。它基于一个包含还原器组合的全局 (如Redux中的)。此外，我还广泛使用来分离逻辑。我有一个包含异步API请求的钩子，它变得非常麻烦，我有机会将这个钩子的几乎每个函数拆分成其他挂钩，但是每个函数都使用全局上下文(更准确地说，是从useReducer()发出的)。
那么，问题是：
在每个需要useContext()的钩子中使用它可以吗？
例如，如果我创建了10个内部使用useContext()并在组件中使用它们的自定义钩子，那么它将如何影响性能。
示例：
提供者/Store.js
import React, { createContext, useRedu
浏览 10提问于2019-09-23得票数 9
回答已采纳
如何在单击时将CSS类添加到现有的REACT元素？
我创建了一个JSFiddle：
在小提琴中，只有当我拥有以下语句时，代码才能正常工作：this.setState({color:blue});
我想要像this.setState({className: 'green'});这样的东西，我做错了什么？
代码：
<html>
<script>
var Hello = React.createClass({
getInitialState: function(){
ret
浏览 3提问于2016-03-31得票数 5
2回答
我试图在Next.js中每3秒选中一次的输入单选按钮之间切换，它从case0切换到case1，从case1切换到case2，但不是从case2切换到case0。我在React和Next.js方面有中等水平的知识。 import React, { useState, useRef } from 'react';
function Abb() {
let count = 0;
const [q1, setq1] = useState(false);
const [q2, setq2] = useState(false);
const [q3, setq3] =
浏览 38提问于2021-04-10得票数 1
回答已采纳
我知道如何在新的州使用prevState，我想知道它到底是如何工作的？这个功能是如何工作的?？为什么在'prevValue‘函数中加入'setFullName’函数会改变它的值？
import React, { useState } from "react";
function App() {
const [fullName, setFullName] = useState({
firstName: "",
lastName: ""
});
function handleChange(event)
浏览 6提问于2021-12-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
