功能组件未从App容器组件接收道具
是指在React或其他类似的前端框架中，一个功能组件没有从其所在的App容器组件接收到必要的数据或属性。
在React中，组件之间通过属性（props）进行数据传递。通常情况下，一个App容器组件会将数据作为属性传递给其子组件，子组件可以通过props来访问这些数据。然而，如果一个功能组件没有正确地从App容器组件接收到所需的属性，就无法访问到相关的数据，导致功能组件无法正常工作。
解决这个问题的方法有以下几种：
- 检查属性名称：首先，确保功能组件正确地从App容器组件接收到了属性。检查属性名称是否正确拼写，并确保属性名称在App容器组件中正确地传递给了功能组件。
- 检查属性值：确保属性值在App容器组件中被正确地设置，并且能够被功能组件正确地访问到。可以在功能组件中使用console.log()或其他调试方法来检查属性值是否正确。
- 使用默认值：如果功能组件没有从App容器组件接收到属性，可以为功能组件设置默认值，以防止出现错误。可以使用ES6的默认参数语法来设置默认值，例如：
function MyComponent(props = {}) { ... }。 - 使用条件渲染：如果功能组件依赖于某个属性的存在，可以使用条件渲染来确保只有在属性存在时才渲染功能组件。可以使用条件语句（如if语句）或三元表达式来实现条件渲染。
总结起来，功能组件未从App容器组件接收道具是一个常见的错误，可以通过检查属性名称和属性值、使用默认值、以及使用条件渲染来解决。在React中，正确地传递和接收属性对于组件之间的数据传递非常重要，它们是实现组件复用和组件之间通信的关键。
相关·内容
我甚至不知道那是不是存在。我正在尝试重用一个组件，然而，我正在尝试重用的组件已经在组件内部处理了接收属性。
如果我在另一个地方重用这个组件，我将不得不更改所有收到的道具。
这是在React中开发时常见的事情，还是我做错了什么？
浏览 4提问于2018-12-14得票数 1
const App = () => (
<View>
<Text>Test</Text>
</View>
)
class App extends Component {
render() {
return (
<View>
<Text>Test</Text>
</View>
);
}
}
当我测试的时候，两件事是一样的。请告诉我这两者的区别。
浏览 0提问于2019-05-03得票数 3
回答已采纳
我正在使用React构建一个音乐应用程序，我是一个新手:)
我的目标是
加载JSON播放列表(格式为)
基于此JSON显示播放列表
用播放列表的轨道填充玩家的队列。
因此，我正在研究几个组件: Tracklist、Playlist和Player。
追踪者有踪迹。
播放列表和播放器有一个Tracklist (和其他东西)：播放器的队列是Tracklist组件。
玩家不是播放列表的后代，这是次要的。例如，我希望能够将播放列表的某些曲目排队(或取消队列)到播放器中。
我想要的是能够在播放列表和播放器之间共享/同步(相同)轨道的道具：
假设我有一个最喜欢的道具作
浏览 1提问于2020-09-21得票数 0
如何使用state属性从react-redux指定由react-meteor-data注入的数据
react组件的结构如下：
import React from "react";
import {createContainer} from "meteor/react-meteor-data";
import {connet} from "react-redux";
import {Data} from "./data.js"
class App extends React.Component {
r
浏览 5提问于2016-04-20得票数 3
回答已采纳
我正在构建一个react应用程序，并且有两个没有父/子关系的功能组件。 组件1呈现一个画布元素，并具有更改该元素的函数。 组件二用于UI，并且有我想要触发组件一的功能的按钮。 这个应用程序相当复杂，我想把所有的画布功能放在一个地方，而不是在全局应用程序范围内。 我的问题是如何在组件2中引用组件1函数。 组件一： export default function CanvasElement() {
let drawImage = () => {
/* Alter canvas */
}
return (
<div>
浏览 34提问于2020-03-28得票数 0
2回答
我刚检查了React里的。他们很酷。然而，简单地包装一个组件不是也能达到同样的效果吗？
高阶分量
这个简单的即席操作将状态作为属性传递给ComposedComponent
const HOC = ComposedComponent => class extends React.Component {
... lifecycle, state, etc;...
render() {
return (<ComposedComponent {...this.state} />);
}
}
组件包装
此组件将状态作为属性传递给子组
浏览 2提问于2016-05-01得票数 58
回答已采纳
我意识到这是一个基本的问题，以前可能已经得到过答案，但我正在寻找一个明确的答案，也许有一些推理，因为我还没有找到一个让我确信有更好/最好/更好的方法来处理这个问题的方法。
场景:仪表板组件通过连接接收redux状态。一些数据是通过仪表板及其子程序共享的。有些数据是特定于仪表板的子程序的。
问题：应该始终将道具向下传递到子组件(如下所示)，还是应该始终将子组件连接到redux并直接从redux状态读取所需的数据？
import React, { Component } from "react";
import { connect } from "react-redux&#
浏览 1提问于2019-02-24得票数 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
回答已采纳
3回答
不更新HTML画布
、、、
我在DrawingCanvas.jsx中有以下代码：
var _ = require('bower.js').lodash;
var React = require('bower.js').React;
var channel = require('com.js').channel;
var DrawingCanvas = React.createClass({
setCanvasImage: function(){
if(this.props.image != null)
{
//var canvas = Re
浏览 3提问于2015-10-05得票数 3
回答已采纳
我有一种我想要避免的反模式。
我有这样的路线：
<Route path="/" component={internationalise(App)} breadcrumbIgnore>
<Route path="login" component={Login}/>
<Route path="signup/:token" component={SignupConfirmation}/>
{/* (ETC other non-logged in routes) */}
浏览 5提问于2016-10-16得票数 0
回答已采纳
收到了以下警告：
警告:失败的propType:在SignUp中没有指定必需的支柱emailExists
警告:失败的propType:在SignUp中没有指定必需的支柱onEmailChange
组件/SignUp.js中没有指定emailExists支柱和onEmailChange支柱。我想mapStateToProps和mapDispatchToProps在containers/SignUp.js中传递到connect()中，并不是因为配置错误而将道具注入组件/SignUp.js。
index.js：
import React from 'react'
impor
浏览 3提问于2016-08-22得票数 1
回答已采纳
1回答
我有一些反应组件，需要获取某些项目来显示。除了一个非常简单的componentDidMount回调之外，这些组件可以是功能性组件。有一个好的设计模式可以让我回到功能性组件吗？
class Things extends React.Component {
componentDidMount() {
this.props.fetchThings()
}
render() {
things = this.props.things
...
}
}
我正在使用react，我还使用connect将组件连接到我的还原器和操作。这是那个文件：
import { co
浏览 1提问于2017-04-04得票数 0
回答已采纳
2回答
说：
道具是由父程序设置的，它们是固定的，贯穿组件的整个生命周期。
这让我感到困惑，因为在React中不是这样，在React中，组件的相同实例可以在其整个生命周期中接收不同的道具(例如，当父级将道具的不同值传递给相同的子实例时，子实例保持不变，它只会得到新的道具)。上面的行声称相同的实例不能在RN中接收不同的道具值。
反应本土化有什么不同吗？
此外，如果不是RN，我也不能打开一个问题，所以如果doc错了，希望RN社区的人会在这个问题上绊倒。
浏览 0提问于2018-01-30得票数 1
1回答
我试图理解将功能组件的道具传递给返回的功能组件
**代码
App组件：
import React from 'react';
import ClickCounter from './ClickCounter';
const App = () => {
return (
<div className="App">
<ClickCounter firstName="John" lastName="Doe"/>
</div>
);
}
ex
浏览 1提问于2021-01-09得票数 0
回答已采纳
我试图创建一个接收数组的组件，这个组件将显示一个包含道具数据的列表
const Mesas = [{
id: 1,
valor: 500,
produtos:['COCA COLA', 'FANTA']
},{
id: 2,
valor: 100,
produtos:['PRATO1', 'PRATO2']
}]
const App = () => {
return (<ListaMesas mesas = {{...Mes
浏览 0提问于2020-06-22得票数 1
回答已采纳
我在我的React.js (+ Redux)应用程序中做了一个更高级的组件，以抽象出过滤从输入元素接收到的字符串的元素列表的功能。
我的过滤专案是，
filter.js
import React, { Component } from 'react'
export default function Filter(FilteredComponent) {
return class FilterComponent extends Component {
constructor(props) {
super(props)
}
浏览 3提问于2016-07-23得票数 0
回答已采纳
我正在学习ReactJS，并且我已经了解到有UI组件和容器组件。容器组件使用classes扩展React.Component实现，包含state和好的旧render方法，而UI组件是使用functions创建的，它们只关注UI，因为它们只接收来自props的数据。
无状态功能组件示例：
const Ninjas = (props) => {
const { ninjas } = props;
const ninjalist = ninjas.map((x) => {
var divStyle = {
color: getRa
浏览 0提问于2019-05-06得票数 6
回答已采纳
App.js
import React, { Component } from 'react';
import { Router, Route, browserHistory } from 'react-router';
import Login from './Login';
import Courses from './Courses';
class App extends Component {
constructor() {
super();
this.state = {
usernam
浏览 2提问于2017-02-09得票数 1
回答已采纳
我想知道扩展React.Component的React在试图决定它是否需要改进型时是否对对象进行了深入的比较。
例如，给出
const Foo = ({ bar }) => {
return <div>{bar.baz}</div>
}
class App extends React.Component {
constructor() {
super()
this.state = { bar: { baz: 1} }
}
render() {
return <Foo bar={this.state.bar} /&g
浏览 1提问于2018-10-25得票数 17
回答已采纳
为了更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但我意识到，可以在不侦听ComponentWillReceiveProps的情况下更新子组件的props。
例如，在以下名为App的组件中，子组件Comp能够在不侦听生命周期方法ComponentWillReceiveProps的情况下接收props。
主要的App组件：
import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp
浏览 6提问于2019-07-09得票数 2
我正在接收来自API的数据，我想获取这些数据并让它填充我的图表。我可以看到调用API数据并将其传递到setState的位置，但我似乎无法正确地将这些数据传递到我的图表中。
我尝试过使用Chart.js的destroy()和update()方法，但都没有效果。我相信这只是我没有在我的应用程序中正确使用它们的问题。下面的代码不包括这些方法，因为我不知道在哪里使用它们。我还尝试将API数据推入图表的数据数组中，但没有运气。
componentDidMount() {
// create chart
new Chart(myChartRef, {
type: "
浏览 1提问于2019-08-06得票数 3
回答已采纳
我有一个ApplicationHeader组件，我想在触摸时导航到一个特定的屏幕，但是
未定义的不是一个对象(计算this.props.navigation.navigate)
App.js
render() {
return (
<SafeAreaView forceInset={{ bottom: 'never' }} style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" /
浏览 0提问于2020-02-05得票数 0
回答已采纳
2回答
我很难转换基于类的组件，使用Redux来使用函数和钩子。我得到了
无法读取未定义的属性“支持”
这是我的实际代码：
import React from 'react';
import { connect } from 'react-redux';
function App() {
const { newValue } = this.props;
return (
<div className="App" style={{ paddingTop: '10px' }}>
<i
浏览 0提问于2019-09-09得票数 0
回答已采纳
当我打开侧边栏时，我想把主要内容放在侧边栏下。
但在Vuetify的官方网站上，我找不到任何相关的东西。在这种情况下我应该怎么做？
在打开导航栏部分时，mainContent的填充似乎发生了变化，是这个原因吗？
============
app.vue：
<template>
<v-app>
<Header
v-on:leftChange="leftChange"
></Header>
<Left
ref="Le
浏览 0提问于2020-04-06得票数 0
嗨，我是redux的新手，我正在尝试使用的应用程序接口创建一个电影应用程序。我正在尝试显示流行的电影，我确信API链接可以正常工作，因为我在postman中测试了它，但我似乎不明白为什么redux不能提取数据。
//action
import { FETCH_POPULAR } from "./types";
import axios from "axios";
export const fetchPopularMovies = () => (dispatch) => {
axios
.get(
`https://api.t
浏览 0提问于2021-05-05得票数 0
2回答
我使用的是React版本“17.0.1”，当我试图从属性中初始化组件状态，所以它不工作时，它只是用未定义的初始化状态。下面的例子将说明我的问题。组件Two
class Two extends React.Component {
state = {
name: this.props.option.name
}
render(){
console.log(this.state.name)
return (
<div>
{this.state.name}
<
浏览 9提问于2021-02-18得票数 0
回答已采纳
8回答
ReactJS道具未定义
、、、
我正在学习如何使用道具。在用我的母语或英语进行研究之后，我无法得到正确的答案。请告诉我为什么会出错。这是App.js文件(默认)
import React from 'react';
import './App.css';
import Product7 from './componentep7/Product7';
function App() {
return (
<div>
<nav className="navbar navbar-inverse">
<div
浏览 18提问于2020-07-18得票数 8
回答已采纳
当使用道具将数据传递到组件并试图从那里访问数据时，我会收到一个错误。我有以下格式的数据
export const data = [
{
id: 0,
title: 'Test',
price: 1500,
},
];
我导入它并传递数据，比如通过下面的道具：
const post0 = data[0];
...
<Post post={post0}/>
在我的组件中，我成功地接收了数据，我可以通过像下面这样的console.log(props);日志来验证这些数据，并获得以下日志条目
{"post": {"i
浏览 4提问于2022-08-01得票数 0
1回答
因此，我很难在两个不相关的组件之间传递数据。下面有下面的代码，但是我不知道如何从另一个组件接收它
<Button
className='search__button'
variant="contained"
color="primary"
size="large"
component={Link}
to={{
pathname: "/home",
state: { data: results }
}}
>
我想将变量“结果”传递给组件，它是一
浏览 2提问于2021-04-13得票数 1
回答已采纳
我听说过getDerivedStateFromProps，但它没有按我所希望的方式工作。
我有这样的代码：
class App extends Component {
static getDerivedStateFromProps(props, state) {
console.log("Get derived state from props called");
return null;
}
render() {
return (
<button onClick={() =
浏览 4提问于2018-05-30得票数 3
1回答
我正在尝试为该项目设置微前端架构。该项目包含多个react应用程序。项目结构如下：
containerheader (npm包)app1 (npm包)app2 (npm包)
在这里，容器用作其他应用程序的包装器。仪表板应用程序显示指向其他应用程序的链接，如app1、app2、app3等.
一旦用户登录头和仪表板应用程序在页面上呈现。用户可以从仪表板导航到其他应用程序。
container
import React, { useState, useEffect } from 'react';
import Header from 'header';
import
浏览 5提问于2020-01-31得票数 3
我将3个属性- numLikes，id和userLiked传递给我的类，我想在渲染发生之前设置状态变量。理想情况下，状态变量的值应该等于其相应的属性，但事实并非如此。 这是我的代码： export default class LikeButton2 extends Component {
constructor(props) {
super(props);
this.state = {
numLikes: props.numLikes,
id: props.id,
userLiked: props.userLiked,
is
浏览 14提问于2020-09-21得票数 3
2回答
另一个反应问题，我有一个解决我的问题，但对我来说，似乎不是很“反应”，所以我希望另一个解决方案。
我使用的是react路由器，所以我的app.js(入口点)的底部是：
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Login} ></IndexRoute>
<Route path="searches" comp
浏览 8提问于2016-03-21得票数 0
回答已采纳
2回答
我做了一些重构，并尝试使用connect()连接一个更高级别的组件来还原，但是我所连接的组件一直给我空的支持。
我已经包含了相关的代码，我已经将我的redux还原器构造成一个格式，所以动作/创建者和还原器都在一个模块文件中。
这些文件是containers/login.js、presentation/login.js、presentation/logins.js、app.js和根index.js。
当我决定重命名一些操作、文件和还原器，将连接移到更高的组件时，连接停止工作，现在我有了空道具。
非常感激的帮助。
// containers/login.js
import { connect }
浏览 5提问于2018-01-07得票数 4
回答已采纳
在发送操作后，道具不会更改。我的残渣容器：
class ConnectedAppContent extends React.Component {
render() {
return (
<div id="content">
<Router>
<Switch>
<PropsRoute path="/login" component={LoginForm}
浏览 1提问于2018-11-13得票数 2
回答已采纳
1回答
我开始使用react路由器，我发现我可以在Link组件中传递'props‘，这样一些值就可以传递给另一个组件。我在使用的按钮中发送一个名为“value”的组件，但是在接收该参数的组件中显示一个错误消息，消息'Object可能为null或未定义‘。
这是我的代码：
我要发送数据的地方：
<Container placeholder>
<Segment>
<Form>
<Form.Field>
<label&g
浏览 1提问于2020-05-15得票数 4
回答已采纳
我在我的应用程序中构建了一个购物车。流程是这样的：
客户看到一个项目列表并单击他想要的项目；下一页是他选择产品数量的地方，然后我在中保存，然后单击Confirm，他转到购物车，其中包含他选择的相同产品。在此页面(购物车)上，他可以更改数量，在此时刻，总数和数量必须更改(见下图)。
我可以重新加载页面，但在生产环境中页面不能正常工作。我需要在不重新加载页面的情况下执行此操作。
如何在不重新加载页面的情况下做到这一点？
我有3个组件:标题(与图标购物车)，ChooseQuantity和购物车。
请看下面的代码：
//My Choose Quantity Component
import
浏览 0提问于2019-08-09得票数 0
虽然很明显，为什么React在默认情况下不对其所有功能组件执行React.memo，并且我们应该在需要时自行包装功能组件。
在我的例子中，我有一个大型的react项目，其结构如下：
const MyBigApp = () => {
const shouldShowX = useSelector(getShouldShowX);
const shouldShowY = useSelector(getShouldShowY);
// Many more selectors
return (
<>
{shouldShowX &&
浏览 1提问于2020-08-17得票数 13
我的目标：在我的应用程序中，我有一个选择组件封装在一个TxtMsgTypePicker类中。我还有一个名为TxtMsgParamView的类，它需要从TxtMsgTypePicker类接收所选的值，并且一旦TxtMsgTypePicker类选择了一个值，就更新我的TxtMsgParamView类中的UI和数据。
这是我的代码：
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ''
浏览 0提问于2018-10-08得票数 0
2回答
我将一些值从应用程序组件中的状态作为属性传递给GetWordContainer组件。使用这些道具，我设置子组件中的状态。但是，GetWordContainer中的状态只更新一次。当App.js中的状态发生变化时，如何使子组件中的状态继续更新？ App.js class App extends Component {
state = {
redirect: {},
word: '',
error: '',
info: [],
partOfSpeech: [],
versions: [],
shortd
浏览 11提问于2020-07-21得票数 0
回答已采纳
您好，基本上我需要传递一些数据到一个组件，以便能够流行该组件： const Data = {
name: "a",
title: "b"
};
export default function App() {
return (
<Div className="App">
<Card name={Data.name} title={Data.title} />
</Div>
);
} 我的卡包含接收数据所需的组件： const Card = ({ props }) =&
浏览 10提问于2020-01-26得票数 0
回答已采纳
我将app.js作为父对象，将uploadlist.js作为子对象。我正在向uploadlist.js传递在app.js中定义的"userid“。这是我的尝试：
app.js：
export default class App extends Component {
state = {
userrole : '',
custid : ''
};
componentDidMount() {
if(localStorage.login)
{
const currentuser = JSON.par
浏览 3提问于2021-06-07得票数 0
2回答
我试图使用react构建一个简单的幻灯片放映(我正在学习react)，并有一个关于组件组成/信息流的问题。
我有一个幻灯片组件，它有两个子组件。一个子slideContainer显示幻灯片，另一个组件显示导航按钮(后退/下一个)。
幻灯片组件接收幻灯片集合作为支柱，并将currentSlide作为状态。slideNavigation组件作为支持接收currentSlide、幻灯片集合和setCurrentSlide回调。
slideNavigation组件根据单击的按钮、幻灯片集合和currentSlide确定新的currentSlide。使用currentSlide将新的callBack返回
浏览 3提问于2017-10-16得票数 1
2回答
我正在开发一个从App.js开始的应用程序。如果用户正在使用app，则第一次呈现LoginScreen，如果用户已经登录，则呈现HomeScreen。
这是我的App.js
export default class App extends Component{
state = {
isFirstTime: true,
}
renderIf(condition, content) {
if (condition) {
return content;
} else {
ret
浏览 0提问于2018-01-17得票数 3
2回答
我有一个类似于redux的应用程序结构：
app
|-router
| — dashboard container
| — — dashboard component
| — setting container
| — — setting component
考虑一下这两个容器，如果我需要从商店获取翻译文本，我应该使用哪种方式？
(1)连接路由器上的redux store，通过道具传给容器
(2)每个容器分别接入redux store
浏览 2提问于2018-07-15得票数 0
1回答
我刚开始对.tsx文件进行单元测试，目前我在测试这个文件时遇到了问题(如果格式被关闭了，很抱歉)
//this is Banner.tsx
import React, {useCallback} from "react";
type Properties = {
close: () => void;
text: string;
const Banner: React.FC<Properties> = ({close, text}) => {
const onClick = useCallback(() => {
浏览 2提问于2021-11-19得票数 0
回答已采纳
2回答
我有两个反应成分：
<select> and <mytable>
我需要用它来构建<myInterface>。设S是<myInterface>的状态，需要由<select>修改并由<mytable>使用。但是，S需要通过如下调用接收初始值：
<myInterface S = {some value} />
在此之后，<select>需要使用刚刚输入的值，之后只有状态S。
有办法在反应中做这样的事吗？我不能修改<mytable>或<select>，但它们具有可以使用S的相关属性
浏览 3提问于2017-04-26得票数 1
回答已采纳
我试着去了解什么是最好的方式来使用道具来回应
假设我有一个使用import {FormattedMessage} from 'react-intl'的容器
假设我在容器的JSX中使用了一个组件。
现在，如果我也想在组件中使用FormattedMessage，应该在组件中再次使用导入吗？或者我应该通过容器将FormattedMessage作为支柱发送到组件中？
示例：
import {FormattedMessage} from 'react-intl';
class Container {
render() {
return (
浏览 3提问于2017-11-13得票数 3
我正在尝试在我的React.js应用程序上实现React.js路由器，但是当我将路由器添加到我的程序中时，我就开始收到一个奇怪的错误。
ReactDOM.render(
<BrowserRouter>
<App />
<Route path="/" component={Headline}></Route>
<Route path="/economy" component={Economics}></Route>
</BrowserRouter&
浏览 2提问于2020-10-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
