componentWillReceiveProps 未触发

2024-04-08

在我的其他课程中,componentWillReceiveProps 工作得很好,但由于某种原因,它在这里没有触发。

ItemView.jsx

class ItemView extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: null, 
            rating: null, 
            sector: null, 
            location: null, 
            description: null, 
            image: "blank.png",
            show: false
       };
    }

    ...

    componentWillReceiveProps(nextProps) {

        if(!nextProps.companyToRender) {
            this.setState({
                name: null, 
                rating: null, 
                sector: null, 
                location: null, 
                description: null, 
                image: "blank.png",
                show: false
            });
       }
       else {
           var companyToRender = nextProps.companyToRender;

           this.setState({
               name: companyToRender.name, 
               rating: companyToRender.rating, 
               sector: companyToRender.sector, 
               location: companyToRender.location, 
               description: companyToRender.description, 
               image: companyToRender.image,
               show: true
           });
    }

    ...

    render () {
       return(
        <div>
         ...
        <CommentBox show={this.state.show} companyToRender={this.state.name}/>
         ...
        </div>
       );

    }
}

评论框.jsx

class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {companyToRender: null};
    }

    componentWillReceiveProps(nextProps) {
        this.setState({companyToRender: nextProps.companyToRender});
    }

    ...
}

如果不传递任何内容,则传递给 itemView 的 prop 要么为 null,要么为 ItemView 分配给它的数组。

componentWillReceiveProps() 仅在状态的属性变为 null 时触发,但在设置时则不会触发。 ( (null --> Entry) 不起作用,但 (entry --> null) 起作用)。

我错过了什么吗?谢谢!

-- edit:

(null -->entry) 更新状态,但不调用日志或任何后续的 componentWillRecieveProps()。 (但是 Entry --> null 确实如此。)

null 的日志 --> 条目 https://i.stack.imgur.com/JcfId.png

条目日志 --> null https://i.stack.imgur.com/4L1DP.png


经过多次痛苦的调试后,我发现问题在于 ItemView 是在模态(react-bootstrap)内部调用的,由于某种原因,它不支持 componentWillReceiveProps()。最终通过重构代码解决了问题。多谢你们!

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

componentWillReceiveProps 未触发 的相关文章

随机推荐

  • 为什么关系数据库存在可扩展性问题?

    最近我在网上看到一些文章 指出关系数据库存在扩展问题 在大数据方面不太好用 特别是在数据量很大的云计算中 但通过谷歌搜索 我找不到充分的理由来解释为什么它的可扩展性不高 您能解释一下关系数据库在可扩展性方面的局限性吗 Thanks 想象一下
  • 如何确定单词的概率?

    我有两份文件 Doc1 的格式如下 TOPIC 0 5892 0 site 0 0371690427699 Internet 0 0261371350984 online 0 0229124236253 web 0 021894093686
  • 存储过程超时 - 但从 SSMS 运行时正常

    我有一个存储过程 错误提示 超时已过期 涉及的代码是ADO VB6 存储过程本身没有问题 您可以在查询窗口中运行它 并且需要不到一秒钟的时间 用于获取连接等的代码也是模块化的 并在大型应用程序中使用 在一个特定数据库上 仅在这一位置发生超时
  • 命名空间“Microsoft.AspNetCore.Razor”中不存在类型或命名空间名称“Hosting”

    我使用 Visual Studio 创建了一个项目 NET Core 2 1 SDK React 模板 我在运行项目时遇到以下错误 缺少一个或多个编译参考 确保您的项目引用 Microsoft NET Sdk Web 并且 Preserve
  • 模拟器中的 UIView 边界/绘图不正确

    我创建了一个单视图测试应用程序并添加了UIButton and UIView to the UIViewController在主故事板中 我已将按钮和视图的大小调整为相同的大小 在我的 VC 的 viewDidAppear animated
  • 通过下拉菜单链接到 HTML 中的其他页面

    我正在尝试通过下拉菜单链接到其他 html 页面 并且我尝试了各种代码 但似乎无法使其工作 我正在使用这段代码
  • Python:确定数字是否为平方、立方等的函数[重复]

    这个问题在这里已经有答案了 我的简单问题是创建一个函数来确定数字 N 是否可以写成a n对于某些给定的 n 即我需要检查是否N 1 n 是一个整数 不知何故 这个函数会产生错误的结果 def is power N n r float N 1
  • 如何将 Address 对象数组传递给另一个 Activity

    我正在尝试传递一系列Address http developer android com reference android location Address html通过 Intent 对象传递给另一个 Activity 的对象 由于 A
  • 值注释在 Junit 测试中不起作用

    SpringBootTest public class RuleControllerTest Value myUrl private String myUrl private HttpClient httpClient HttpClient
  • 在 C# 中处理非验证 SSL 证书的最佳方法是什么

    我使用以下代码来确保所有证书都通过 甚至是无效的证书 但我想知道是否有更好的方法 因为此事件被全局调用 而我只希望证书通过某个 HTTP 调用而不是对于任何其他异步发生的事情 This delegate makes sure that no
  • 保存 Excel 文档 Apache POI

    我需要从 Excel 文档创建信息 我使用 Java 和 Apache POI 这是我的代码 Get path with JFileChooser public static String LeeRuta JFileChooser choo
  • CATransform3D 旋转导致一半图像消失

    我使用以下代码来旋转图像 但已旋转到页面 之外 的图像的一半 沿 y 轴向下 消失了 怎么修 heading以弧度为单位 CALayer layer myUIImageView layer CATransform3D rotationAnd
  • 禁用“使用 use strict 的函数形式”,但保留“缺少 'use strict' 语句”警告

    我正在使用 jslint 来验证我的代码 我的所有页面上都有 use strict 如何禁用消息 使用 use strict 的函数形式 但保留 缺少 use strict 语句 警告 这样我就不会忘记将其放在新文件中 Thanks 根据克
  • free 不会删除分配给指针(int 数组)的内存,使用 free 两次可以工作,为什么?

    这是出于好奇 我试图找到我对之前问题的疑问的答案 但他们似乎没有答案 所以在这里询问 我刚刚编写了一段代码 试图将内存分配给 int 指针 以填充数组 并扫描 int 值 一旦我完成了数组 我想删除分配给指针的数据 内存 尽管我的代码工作正
  • 错误:pandas 哈希表 keyerror

    我已经使用 pandas 成功读取了 csv 文件 当我尝试从数据框中打印特定列时 我收到关键错误 特此 我分享带有错误的代码 import pandas as pd reviews new pd read csv D aviva csv
  • 离子科尔多瓦飞溅屏幕/图标

    我正在使用适用于 iOS 和 Android 的 Ionic Framework 设计一个应用程序 我配置了启动屏幕和图标 但当我在手机上运行该应用程序时 我仍然有默认的 Cordova 启动屏幕和图标 使用ionic run androi
  • 不完整日期的策略

    正在开发一个应用程序 我们希望用户能够输入不完整的日期 在某些情况下 只有一年 例如 1854 年 或者可能有一年和一个月 例如 1983 年 3 月 或者可能有完整的日期 2001 年 6 月 11 日 我们想要一个 日期 属性 列 并且
  • 在 Windows 上使用 bcrypt 3.0.1 和 ruby​​2.0 时出现问题

    有人在 Windows 8 上安装 bcrypt 3 0 1 或 3 1 2 时遇到任何问题吗 我尝试过测试不同的版本 但出现此错误 但运行 Rails 服务器后出现此错误 无法加载此类文件 2 0 bcrypt ext 您的应用程序中没有
  • 本地#includes

    有没有某种方法可以在本地 include 标准内容 一次针对一个函数 一个类等 而不是全局的 举一个非常简单的例子 人们可能想使用 std string 但它只在一个类中需要 并且您不希望它的开销无处不在 而不是制作 include本地 您
  • componentWillReceiveProps 未触发

    在我的其他课程中 componentWillReceiveProps 工作得很好 但由于某种原因 它在这里没有触发 ItemView jsx class ItemView extends React Component constructo