React 应用程序 componentDidMount 未从父级获取道具

2024-01-28

我试图将道具从父组件传递到子组件,即使它被调用两次(不知道为什么,componentDidMount应该只被调用一次)道具似乎是空的。

父组件:

class Members extends Component{
    constructor(props){
        super(props);
        this.state = {
            interests: []
        }
    }

    componentDidMount(){
        fetch(interestUrl, {
            method: 'GET',
            headers: {
              "Content-Type": "application/json",
              "Authorization": this.props.authToken
            }
        })
        .then((response) => response.json())
        .then((json) => {this.setState({interests: json})})
        .catch(error => {console.log("Error: " + error)})
    };

    render(){
        return(
            <div className="Members-body">
                <div className="Menu-sidebar">
                    <Menu interestList = {this.state.interests}/>
                </div>
                <div className="Main-container">
                    <Main/>
                </div>
            </div>
        )
    }

}
export default Members;

子组件:

class Menu extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log("interestList: "  + this.props.interestList);
    }

    render() {
        return(
            <div className="Menu-container">
                este es el menu de la aplicacion
            </div>
        )
    }
}

export default Menu;

Menu 组件内的 componentDidMount 的控制台日志打印:

interestList: 
interestList: 

有什么想法可以指引我正确的方向吗? 不胜感激!


答案请查看@azium 的评论:

不,它不应该显示在控制台中,因为componentDidMount仅在组件安装时运行一次。什么时候Members组件调用setState并将新的 props 传递给Menu,它已经安装,因此不会使用填充的数组再次调用函数和控制台日志。您可以通过将控制台日志移至render功能
组件is在创建之前接收 props,但 prop 是一个空数组。你明确地说,在你的Members构造函数。然后Members你召唤的坐骑setState哪个触发another使用填充的数组进行渲染。阅读文档 https://reactjs.org/docs/state-and-lifecycle.html完整的解释/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 应用程序 componentDidMount 未从父级获取道具 的相关文章

  • 设置时区 React-Datepicker

    我正在使用反应日期选择器 https www npmjs com package react datepicker让用户选择一个日期 但是 现在它使用本地时间 PDT 但我想对其进行硬编码以使用特定时区 PST 我尝试使用utcOffset
  • 防止在 MaterializeCSS 下拉菜单中单击时关闭该下拉菜单

    我正在为当前项目使用 Materialize css 并且我的下拉菜单中包含一些输入表单 下拉菜单可以选择关闭 单击外部 dropdown content 单击内部 dropdown content 点击 dropdown button 我
  • “ReactNode”不是有效的 JSX 元素

    我有以下代码 代码沙箱 https codesandbox io s react typescript forked 50beyp file src App tsx import ComponentType ReactNode from r
  • 如何在rails中使用npm包?

    我正在尝试使用王牌编辑 https github com ajaxorg ace在我的 Ruby on Rails 应用程序中 大部分视图由 React 组件组成 我正在使用反应轨道宝石 https github com reactjs r
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • addEventListener 通过映射调度来反应 redux

    我目前正在尝试将事件侦听器添加到我在反应中制作的应用程序 我通过连接到运行的 componentDidMount API 来做到这一点只有一次该组件已渲染 仅此而已 我的问题是我正在使用connect from react redux将我的
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • React Router v4 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路
  • 在 React 应用程序的 shell 脚本中设置环境变量

    我正在尝试在 powershell 和 bash 脚本中设置一些环境变量 并在 ReactJS 应用程序中读取它们 shell脚本很简单 env AUTHDOMAIN some domain com env AUTHCLIENTID bun
  • React 中的 Reconciliation 详解

    我是 React JS 的新手 谁能准确解释和解是如何运作的 我尝试从 React 官方网站上理解它 但没有得到它 我是这样理解的 您会同意 React 使用组件使事情变得简单且更快 通过 JSX 我们可以让用户定义的组件变得更容易 一天结
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • React - 如何在不使用构造函数的情况下访问道具

    注意 我在使用 React Native 时遇到了这个特定问题 但我想这也适用于 React 我有一个使用 React Component 构建的反应组件 我不需要设置状态 但我确实有道具 我建议的语法如下 class Header ext
  • webpack 4 React loadable 不会根据卡盘点分割供应商

    我目前正在使用 webpack 4 和 React loadable 来创建块 它实际上分块取决于断点 然而 供应商规模保持不变 React loadable 还不支持 webpack 4 吗 或者我缺少一些设置 css 实际上似乎被分成了
  • React onClick 事件仅在渲染组件时触发

    动态渲染组件的 onClick 函数应通过 useState 设置所选日期 imgs 上的 onClicks 完全按照您的预期工作 没有任何问题 即使只是在其位置放置一个带有 onClick 属性的 div 也是行不通的 当组件渲染时 on
  • 使用 ApolloClient 从 useContext 挂钩导入一个简单变量

    我的反应相对较新 似乎无法导入client来自上下文的变量 我有一个名为 federation tsx 的文件 其中包含一些代码 我相信这应该是相关部分 const link createHttpLink uri process env U

随机推荐