reactjs - ReactJS 返回保存的响应并传递给不同的组件

问题描述

我们的项目在 REACT 中，后端在 Express 中。

我无法将父表的插入 ID 返回到我的组件并将其传递给需要父 ID 以呈现添加子按钮的其他组件（它在子记录中传递父 ID）

每个父记录都有附加的“添加平面图”按钮，可在其子表中添加记录。（检查图1）

因此，在呈现所有父表行时，我正在检查“ID”是否存在，然后显示该行的“添加”按钮。我无法在渲染时显示“添加平面图”按钮，因为它的父记录不存在并且无法传递子表中的外键“父 ID”。

检查下面的代码以呈现添加平面图（子表记录）按钮：

class FloorPlanButton extends React.Component {
  render() {
    return (
      <div className="row">
        {this.props.dependentValues.id ? (
          <button
            onClick={() =>
              this.props.addFloorPlanButton(this.props.dependentValues.id)
            }
          >
            Add Floorplans
          </button>
        ) : (
          ""
        )}
      </div>
    );
  }
}

当用户单击“添加行（父级 - 检查图像 1 的右上角）”并保存该记录时，我想呈现“添加子级”按钮。它将记录保存在父表中，但无法显示“添加平面图”按钮，因为渲染按钮不存在。（检查图2）

检查下面保存父表记录的代码：

let response = await AboutService.insertTableData(url, {data: data});

两个代码都在不同的组件和文件中。

请参阅下面的工作流程来解释文件/组件和数据流的这种情况：

有一个文件“home.js”，它呈现内容管理组件并将所有数据传递给显示（父表）
内容管理组件：
- 一个。使用“添加行”按钮呈现所有父行以添加新的父行
- 湾。每个父行都有一个名为“Add Floorplan”（子表）的按钮
单击添加行按钮将所有输入的数据（父表）传递到主文件“home.js”</li>
Home.js 文件具有函数“insertData”与 Express 通信，后者将数据保存在适当的表中并返回响应。
问题：我无法找到将更新后的数据（旧记录+新记录）传递给内容管理组件并在不重新渲染的情况下为新记录显示“添加平面图”按钮的方法。

请帮助我在保存父记录时呈现“添加平面图”按钮，而无需重新呈现或刷新面板。

标签： reactjsexpresscomponents

插入数据后，您可以再次调用您的获取数据承诺（希望它在函数中，以便可以轻松调用），这可能会使用最新记录更新您的状态。

在子组件中，您可以使用生命周期方法componentWillReceiveProps，该方法将设置子组件的状态并相应地应用更改。

玩 React 生命周期的最佳文章：- http://busypeoples.github.io/post/react-component-lifecycle/

reactjs - ReactJS 返回保存的响应并传递给不同的组件

问题描述

解决方案

推荐阅读