为什么react组件中没有定义数据？
在React组件中没有直接定义数据的原因是因为React采用了一种称为"单一数据源"的状态管理模式。React组件的核心思想是将UI分解成可重用的组件，每个组件只关心自己的状态和渲染，而不需要直接定义数据。
在React中，数据通常通过props和state来传递和管理。props是从父组件传递给子组件的不可变数据，而state是组件内部管理的可变数据。组件可以接收父组件传递的props并将其用作自己的状态或渲染内容。当组件的状态发生变化时，React会自动重新渲染组件，以反映新的状态。
这种设计模式的优势在于可以更好地组织和管理组件之间的数据流。通过将数据从上层组件传递到下层组件，可以使组件之间的通信更加清晰和可维护。同时，通过将数据的管理集中在组件的状态中，可以更好地控制数据的变化和渲染的更新，提高性能和用户体验。
对于React组件中没有直接定义数据的情况，可以考虑以下情况和解决方案：
- 如果需要在组件内部存储和管理数据，可以使用组件的state。通过调用setState方法更新state，可以触发组件的重新渲染。
- 如果需要在多个组件之间共享数据，可以将数据提升到它们的共同父组件中，并通过props传递给子组件。这样所有组件都可以访问相同的数据。
- 如果需要在不同组件之间进行通信，可以使用事件机制或全局状态管理库（如Redux或MobX）来处理跨组件的数据流。
总之，React采用了一种灵活而可扩展的数据管理模式，通过props和state实现了组件之间的数据传递和管理，使得开发更加高效和可维护。
相关·内容
我正在尝试使用这个指南来实现一个反应表：
在指南中的某一点上，它说要使用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
1回答
我试图在这里使用react嵌套元素，但我无法呈现第三个元素。前两个react子元素工作得很完美，但是第二个嵌套元素没有呈现吗？为什么是这样？我该怎么解决这个问题？
var Nested=React.createClass({
render: function(){
return(
<div className="second">nested div</div>
)
}
});
var Component=React.createClass({
浏览 7提问于2017-01-20得票数 1
回答已采纳
2回答
HTML自定义属性没有显示？
、、、、
使用React应用程序，我目前正在为E2E测试添加自定义属性到HTML或React组件(Test咖啡馆)
我不知道为什么当我检查页面时，额外的data-test="burger-menu-btn"没有出现在任何元素中？
import {slide as Menu} from 'react-burger-menu';
...
<Menu className="sidebar-menu" isOpen={menuOpen} data-test="burger-menu-btn">
<Nav.L
浏览 3提问于2020-10-01得票数 2
回答已采纳
1回答
为什么我们不能在react类组件中使用钩子？React官方只说钩子在类内不起作用，但没有说明为什么它不能工作。
浏览 4提问于2022-01-26得票数 0
回答已采纳
我试图在一个函数组件中进行API调用，这个函数组件是一个反作用钩子，并根据结果重新呈现组件的内容。以下是代码：
组件调用API-
function IntegrationDownshift() {
render(
<Paper square>
{setResults(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
浏览 4提问于2019-06-05得票数 9
我是新来的。我想问一个最基本的问题，因为我在Google上找不到相关的文档或答案。以下是典型的react代码的前3行：
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
第二行导入的引导组件与react中的Componen
浏览 4提问于2021-04-13得票数 0
回答已采纳
1回答
我不知道我的WebStorm设置发生了什么变化，但以前每当我添加新的react组件时，它都会通过在组件名称上添加下划线来给我一个警告。但现在它没有显示任何警告。为什么？
请看我的截图例子，目前在截图函数中没有定义，所以它给出了下划线。
如何重置设置？
在屏幕截图中，我添加了Button,Dialog,DialogTitle，但没有导入。它没有给出任何警告，为什么？
浏览 4提问于2018-09-01得票数 0
3回答
在javascript类constructor()中获取数据是一种好的做法吗？
例如，在react类constructor()中，我找到的每个教程都在componendDidMount()中获取数据，但没有人质问为什么我们不能在constructor()中这样做。
这个问题与javascript类有关，不仅仅是react。
浏览 3提问于2019-03-15得票数 13
1回答
我试图将“数据”传递给其他归档文件(CampaignList.js > Campaign.js)，但现在不知道为什么变量不传递给Campaign.js函数。我在YouTube上看了一些视频，看了一些论坛，没有任何帮助。
CampaignList.js
import React from 'react';
import {
StyleSheet,
Dimensions,
View,
Text,
TouchableOpacity,
FlatList
} from 'react-native';
import Campaign from
浏览 0提问于2020-12-03得票数 0
回答已采纳
1回答
我正在尝试重构从混合到HOCs，以便我可以升级到最新的反应(我目前正在使用React 13/ES5)。当我的组件加载时，mixin能够访问一个数据对象this.data，该对象具有一个带有路由的query属性。
React.createClass({
mixins: [myMixin],
data: {
query: "/api/foo"
},
componentDidUpdate(): function(){
}
...
}
在componentDidMount 中，它将查询该路由，返回数据并将其置于状态。
var myMixin = Reac
浏览 4提问于2017-04-01得票数 1
回答已采纳
您好，我正在学习JavaScript和react中的异步数据处理。我想让异步功能组件提供的数据在基于类的组件的状态下可用。 然而，我在基于类的组件的状态下实际访问接收到的数据时遇到了问题。 下面是我的异步函数组件，它返回值： export function validateAudioFile () {
setTimeout(function(){ return "hallo" }, 1000);
} 下面是我的基于类的组件，它接收这个值： import {validateAudioFile} from './AudioFileValidati
浏览 32提问于2020-11-07得票数 0
1回答
我对所有这些技术都很陌生，但据我所知，您可以使用React和Firebase而不使用react-redux-firebase。你可以用
react
react-native
redux
react-redux
react-native-firebase
然后从Firebase加载数据(例如Firestore)，并将数据放入还原器中，以便将其合并到redux存储中。
为什么我需要react-redux-firebase**?** ，它解决了什么问题？
我尝试过它的，但它们似乎是为已经熟悉其目标的人编写的。它们并没有真正解释，在阅读示例时，我不明白为什么我特别需要rea
浏览 0提问于2019-08-23得票数 3
回答已采纳
我正在尝试设置我构建的的onChange。我的两个组件是配置文件和选择。我不知道为什么，但我从来没有进入处理。
我的代码(配置文件)：
@Profile = React.createClass
handleGender: ->
console.log('here we go')
render: ->
React.createElement Select, { options: @props.gender, onChange: @handleGender }
选择组件
@Select = React.createClass
render: -&
浏览 1提问于2016-03-14得票数 0
回答已采纳
我有一个无状态函数组件(请参阅下面的标题)，它使用React render在呈现时显示一些简单的标题元素。除了没有内部状态之外，Title也不会从它的父组件(GameHeader)接收任何支持。但出于某种原因，每当我从树中的另一个无关组件更新整个应用程序状态时，Title仍然会继续被重新呈现，这会导致React显示动画每次发生不相关的应用程序状态更改时都会运行。
// GameHeader.js
import React from 'react';
import Title from './Title';
import Options from '.
浏览 5提问于2020-11-29得票数 1
我不明白为什么当我点击我的应用程序中的链接时，什么也没有发生。
在我的index.js文件中，我正在加载名为“游戏”的主屏幕。在“游戏”中，我有两个链接，当点击时，应该会呈现另一个屏幕。
在我的index.js中：
import React from "react";
import ReactDOM from "react-dom";
import Game from "./Game/Game";
ReactDOM.render(
<React.Fragment>
<Game/>
</React.Fragm
浏览 13提问于2020-02-06得票数 0
回答已采纳
2回答
类的属性的名称是什么？
、、、
我正在浏览React文档，我偶然发现了这段代码。
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
他们在这里做的事情有没有一个特定的名字，他们在这个类上创建一个propTypes对象？
这只
浏览 0提问于2017-05-26得票数 1
我通过useAxios钩子使用React API钩子来获取组件加载时的useEffect数据。代码如下(简化)：
const [formData, setFormData] = useState<FormData>();
const [{ , executeGet] = useAxios('', {
manual: true,
});
const getFormData = async () => {
let r = await executeGet({ url: `http://blahblahblah/`});
retur
浏览 19提问于2020-05-17得票数 0
回答已采纳
2回答
我有一个名为<SensorList />的React组件，它有许多子<SensorItem />(另一个React组件)。我希望能够在每个<SensorItem />上从<SensorList />中声明一个onClick事件。我尝试做了以下几件事：
sensorSelected: function(sensor) {
console.log('Clicked!');
},
render: function() {
var nodes = this.state.sensors.map(function(senso
浏览 0提问于2015-02-02得票数 67
回答已采纳
我正在学习如何使用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
4回答
我刚开始学习React & React ，并尽我最大的努力把它学好。在学习过程中，我学习了道具和state，但是这里有一件事让我感到困惑，那就是、父组件、和子组件。
当我们在React或React 中创建组件时，它是这样创建的：
export default class myApp extends React.Component{
render(){
return(
// Do something ...
);
}
}
就是这样。那么，为什么人们会说父组件和子组件等等。是React.Component是父组件还是m
浏览 3提问于2018-10-03得票数 3
回答已采纳
我刚反应过来，还有点困惑。
我的目标是使用GET请求在HTML中呈现一堆json数据。我正在使用react和redux来管理对象的状态，但我相信我的问题是数据甚至不在那里
因此，只要有人请求一个URL，他/她就会看到json中的大量数据。
我得到组件中的错误
TypeError:无法读取未定义的属性“映射”
这是密码
动作
export function getCourses() {
return (dispatch) => {
return fetch('/courses', {
method: 'get',
浏览 1提问于2016-07-31得票数 5
回答已采纳
你好，我知道为什么，但我正在尝试处理一些静态数据，并在我的meteor和react项目中使用道具传递它，但无法访问我在‘update’变量中创建的静态数据。有没有人能帮我解释一下原因并解决这个问题，非常感谢：)
import React, { Component } from 'react';
import { default as UpdateCard } from '../components/UpdateCard.jsx';
let updates = {
title: 'Replace Title A with B',
浏览 0提问于2016-05-18得票数 0
我正在创建几个React组件，除了呈现数据之外，它们的行为方式相同。我在mixin中加入了类似的逻辑，包括渲染函数。我唯一传递的是负责以所需方式呈现数据的附加组件。
var A = React.createClass({
mixins: [MyMixin],
MyComponent: B,
});
var B = React.createClass({
get_value: function() {
// should return some value using top-level context
},
render: func
浏览 0提问于2015-11-08得票数 0
我很难理解为什么这个简单的Bootstrap 不能工作。我正在使用React、Bootstrap和React-Boostrap。
import React from "react";
import ReactDOM from "react-dom";
import { Button, Form, FormCheck } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
return (
<
浏览 17提问于2020-05-10得票数 2
4回答
在我周围(例如博客文章、代码)，我看到了用于响应无状态功能组件的代码，其中导入了React，尽管它从未被使用过。
import React from 'react';
function MyComponent() {
return <div>Howdy!</div>;
}
export default MyComponent;
我想知道，当未实际使用它(以任何显式方式)时，我们为什么需要导入React。
我也很惊讶，我的林特没有抱怨没有使用的进口。
是否有什么理由将React导入我不知道的功能组件中？
浏览 6提问于2017-05-23得票数 29
回答已采纳
3回答
我试图在react中构建基本的应用程序，我不明白为什么我不能在DOM中看到一个组件(称为指令)的信息。有人要帮忙吗？
App.js：
import React from "react";
import ReactDOM from "react-dom";
import instructions from "./components/instructions/instructions"
class Generator extends React.Component {
render() {
return (
<div cl
浏览 3提问于2019-12-18得票数 1
回答已采纳
我不熟悉React，我非常困惑，日夜不停地思考这个问题，几乎我所有的头发都掉下来了，这就是为什么在使用类创建组件时，总是扩展React.Component类的原因。
但是在React.Component函数组件和其他方法中，我们没有做任何这样的事情来将创建的组件推入到类中。因此，主要的问题是，什么是React.Component类?为什么我们总是将新组件作为使用扩展的子组件添加到它，以及为什么我们不能在没有在类组件中使用扩展或不扩展React.Component类的情况下在react中创建本机组件。那么，React.Component类是什么呢？内部发生了什么？
我会非常感谢这个人，他会用例子
浏览 0提问于2018-10-01得票数 5
回答已采纳
6回答
我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。
React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则)
我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？
最起码的例子：
const Hello = props => <p>Greetings {props.name}</p>;
const Wrapper = Component => props =>
浏览 7提问于2019-05-24得票数 20
回答已采纳
我有一个上下文提供程序，用于存储组件列表。这些组件被呈现到门户(它们呈现绝对定位的元素)。 const A = ({children}) => {
// [{id: 1, component: () => <div>hi</>}, {}, etc ]
const [items, addItem] = useState([])
return (
<.Provider value={{items, addItem}}>
{children}
{items.map(item => createPortal(
浏览 8提问于2020-04-07得票数 0
回答已采纳
我在用Jest /酶编写的测试用例中遇到了一些问题。我有一个React / Redux组件，并且试图编写一个基本的测试，但是得到了以下错误：
Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'undefined'.
这是我的密码：
dashboardComponent.js
import '../stylesheets/dashboardCom
浏览 0提问于2018-08-31得票数 6
回答已采纳
开门见山，在基于react类的组件中，prop对象从何而来？
我正在遵循官方的React tic-tac-toe游戏教程。
首先，当我查看react Component类(我们在创建React组件时对其进行扩展)的代码时，我观察到该函数有3个参数Component(props, context, updater)，但我不明白为什么在调用props ()的情况下只像super(props)这样传递props。不是也应该为context和updater传递值吗？为什么代码在不调用super的情况下运行时没有错误？
import React, { Component } from "reac
浏览 0提问于2019-06-23得票数 2
2回答
我有一个React类，我们称它为A。我正在对它运行一个jest测试，但我一直收到
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
在我正在做的React类中：export class A extends Component ..
在我正在执行的jest测试文件中：import { A } from './A.js'
当我运
浏览 0提问于2019-04-04得票数 0
在下面的简单组件中，我对类型记录有一个问题。
这项工作如预期的那样：
import React from "react";
export default function App() {
const simpleComp = (shouldSayA: boolean) => {
return shouldSayA ? <p>a</p> : <p>b</p>;
};
return <div>{simpleComp(true)}</div>;
}
但是，当我将simpleComp函
浏览 6提问于2022-03-01得票数 0
props.children的反应是什么？
是什么定义了这些孩子？
它们是否在组件的呈现方法中定义？我想是的。
孩子们总是被渲染吗？如果是，那么为什么在使用react路由器时，我需要手动将{this.props.children}放到呈现方法中？那又有什么意义？
这就是我的意思：
// modules/App.js
// ...
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
浏览 2提问于2016-10-17得票数 0
回答已采纳
1回答
如果API没有更新，我正试图围绕api调用编写一个包装器组件来呈现“加载”。我对此非常陌生，但我似乎不明白为什么状态没有传递给ApiResp组件：
这是状态变化的console.log .为什么apiResp中的最后一个console.log没有定义？
App.js
class App extends React.Component {
async componentDidMount() {
let xx = await axios.get(apiUrl)
console.log(`componentDidMount`, xx)
this.setStat
浏览 2提问于2021-01-04得票数 2
回答已采纳
我正试图在我的reactjs项目中使用这个库的“reactjs images”。我正在收到react文件中的错误“意外令牌”-映像\src\components\Footer.js文件。而且，在同一行中，错误"'import . =‘只能在.ts文件中使用“。
import type { PropsWithStyles, ViewType } from '../types';
此外，我收到的错误“‘类型别名’只能在一个.ts文件中使用。”在许多组件文件中的“反应-图像”库。为什么会这样呢？谢谢。
import React, { Component, Fragme
浏览 1提问于2019-09-02得票数 1
回答已采纳
除了类有状态和函数没有之外，我认为我们可以通过类组件来实现我们的状态和功能需求，那么为什么我们还需要React.js中的函数组件呢？
浏览 2提问于2018-10-17得票数 1
我试图理解为什么我不能将数据对象的数组属性作为道具传递到组件中。我认为这是一个关于React如何工作的基本理解问题，并且/或者像this...any insight这样的情况下的陷阱是值得赞赏的！ 上下文:我正在为React中的一个会议做Show页面。该显示页面将显示诸如“标题”、“描述”等元素，以及遍历"agenda_items“列表。 数据来自单个JSON API响应。"agenda_items“是数据结构中的一个嵌套数组。 {
data: {
id: 2,
title: "Example title",
description
浏览 38提问于2021-05-05得票数 0
回答已采纳
我有以下代码，我不明白为什么"TestA“组件可以访问”useEffect“组件中的"s”变量。
import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';
const Test = ({children}) => {
const [init, setInit] = useState(0);
useEffect(() => {
setInit(1);
}, []);
useEffect((
浏览 0提问于2020-05-23得票数 1
新的反应和不知道如何构造谷歌搜索，所以决定在这里问。正在上一堂反应教程，老师就这样做了：
#App.js
import React, { Component } from 'react';
import Ninjas from './Ninjas.js'
class App extends Component {
state = {
ninjas : [
{ name: 'Ryu', age:30, belt:'black', id:1 },
{ name: 'Jacy',
浏览 0提问于2018-12-31得票数 0
回答已采纳
当钩子的数量发生变化或钩子被称为更改的顺序时，就会触发各种错误。响应文档中的这些限制/规则，并记录修复各种错误的方法。
我明白这些规则是存在的，但它们为什么存在呢？上述页面声明
React依赖于调用钩子的顺序。
但是，为什么React决定依赖一个类似数组的结构，而不是一个键控对象来访问钩子调用呢？如果这甚至是一个设计决策，或者它是钩子必须“底层”工作的固有方式，那么似乎没有任何反应文档来说明细节。
浏览 2提问于2022-03-09得票数 1
1回答
我正在使用Next.js的最新版本来制作我的博客网站，不知道为什么显示错误，当我试图制作我的表单时，然后显示我的错误，就像这样： Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()? ? 我在下面的代码中尝试过： import React, { useState } from "react";
import { APP_NAME } from "../
浏览 114提问于2021-03-01得票数 2
回答已采纳
const App = () => {
return React.createElement(
"div",
{},
React.createElement('h1', {}, "Adopt The Pet"))
}
}
ReactDOM.render(App(), document.getElementById("root")); // this works
// vs
ReactDOM.render(React.createElement(App), document.getElementBy
浏览 2提问于2021-07-24得票数 3
1回答
为什么我们要把参数放到module.hot.accept()中？如果我们什么都不放，webpack.HotModuleReplacementPlugin可以工作，但是React组件也会丢失它的状态数据。如果我们使用react-hot-loader，我们应该将参数放到accept方法中，但我不知道第一个参数是什么意思，也不知道为什么回调应该再次require并获取default
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {AppContainer
浏览 7提问于2018-08-16得票数 0
2回答
您可以通过代码框查看这个问题。
代码框：
上下文
我正在尝试获取一些数据，填充一些变量并呈现React中的值，实质上是遵循“等待/异步+ runInAction”文档示例：
然而，当数据被获取时，React实际上不会重新呈现。但是，如果您在其中编辑文本(即将hi更改为his或其他任何内容)，则会看到正确的值。
问题
我在数据获取方面到底做错了什么？为什么在某些数据被获取后分配给它的值时，观测值没有被正确地重新呈现？
浏览 9提问于2021-06-15得票数 0
回答已采纳
我试图更好地理解为什么我的所有组件在Router v5中的路由更改时都会重新呈现。注意，这些组件只是重新呈现，而不是重新安装。当我在dev tools中打开react扩展并选择Highlight Updates复选框时，我可以看到所有组件在更改路由时都会被概述，甚至那些位于比路由匹配级别更高的组件：
<Router>
<MyHeader />
<ComponentWithRoutes />
</Router>
在这个简单的示例中，我希望更改路由不会重新呈现MyHeader组件，因为没有什么变化。不过，我仍然会看到开发工具的亮点。我认为这是
浏览 3提问于2018-06-05得票数 5
回答已采纳
我刚开始使用redux-forms，试着学习他们关于字段数组()的教程。
如果renderMenuItem是空的，那么首先呈现1-element，否则它应该为props.MenuItems中的每个元素呈现一个renderMenuItem-element。
我做了一个组件menuInputFields，但它从不呈现(没有显示在html页面上，也没有调用render()函数)，我也不明白为什么+ Values元素呈现一个奇怪的元素(见图)
console.log只是为了表明我实际上可以访问默认的导出menuInputFields。
createMenuInputFields (我的redux表单
浏览 1提问于2018-02-26得票数 0
我刚开始使用React和，我想知道为什么我的上下文提供程序似乎没有将新的值传递给子组件。我将其设置为初始值"ColorContext“为'red‘，但我希望按钮中的"ColorContext”值为’绿色‘。但是，当我尝试这样做时，"ColorContext“值不会改变，并且保持”红色“。
下面是我的代码的链接：
import React, { Component, useState, useContext, createContext } from 'react';
import { render } from 'react-dom
浏览 0提问于2019-07-25得票数 4
回答已采纳
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
我正在做一个简单的“React Redux”实现的例子。但是，似乎是由于某种原因，我没有得到我应该从商店得到的价值。此外，请注意：
控制台中没有错误或警告。在"home.js“(构造函数中)执行console.log时，传递的道具值显示为未定义的.。
我不知道为什么数据无法传递。有人能帮我吗？
home.js
import React, {Component} from 'react';
class Home extends Component {
constructor(){
super();
console.log("***"
浏览 5提问于2020-01-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
