问题标签 [react-on-rails]

我正在尝试使用 Ruby on Rails 和 React 构建一个简单的应用程序。我正在使用 gem react_on_rails。另外，我正在尝试在需要时使用 Redux 在不同组件之间进行通信。我目前遇到的问题我不明白如何在应用程序中保存 Store。如果它是一个普通的 React 应用程序，我在组件之间共享 Redux 没有问题。在 React On Rails 中是一种不同的设置方式，它在当前实现中运行良好，但是当我切换到不同的页面或刷新页面时，我失去了存储。

我的目标是通过 Redux 将产品 ID 添加到购物车，当用户重定向到/cart页面时，它可以从 Redux 商店检索购物车数组，然后我可以用所需的产品填充页面。

Rails 中的简单视图组件示例。

将产品添加到购物车数组的简单反应组件示例

先感谢您

我试图弄清楚如何从我的反应前端访问以嵌套散列形式发送给我的 Rails 数据。我终于将它设置在它击中正确控制器以从中获取信息的位置。

以下是相关代码：

这就是它的名称：

最后，这是我试图渲染它的地方：

当我 console.log(users) 测试它是否正常工作时，它现在正在呈现一个空数组。通过 SQL 在 LedgersService 中生成数据：

以下是数据被转发给我的方式：

找不到资源的序列化程序：{:transactable=>{:type=>"Deposit", :id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022 ", :transacted_at=>"2019-03-12 19:04:48.715678", :amount_cents=>15, :notes=>"none", :processor=>nil, :details=>nil}, :ledgers=> [{:entry_type=>"credit", :amount_cents=>15, :transacted_at=>"2019-03-12 19:04:48.715678", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022", : transactable_type=>"存款", :transactable_id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739"}]}

User 模型确实存在一个序列化程序，但它没有被生成。

通常数据有多个这些点，例如，一个调用应该有 3 个以上的可交易对象，这就是为什么我使用分类帐上的地图功能一次获取每个相关数据的原因。任何有关调整的建议将不胜感激！

我在 Redux 商店中遇到react_on_rails了我想要切换页面的问题，它对我来说无法正常工作。如果我更改页面或重新加载它，我将丢失 redux 商店。另外，我很抱歉我放了一堆代码，但我真的不知道其他任何东西或修复它的方法，react_on_railsredux 的官方文档并没有帮助我，它更有可能让我困惑它应该如何工作。如果有人知道如何使它工作，请提前，谢谢

rootStore.js

减速器/index.js

我正在尝试使用魔法的组件

我的切入点

我的布局应用程序

React on Rails 应用程序非常新，尤其是 React 部分。我正在尝试访问由 Rails 服务中的 SQL 查询给出的嵌套哈希中的数据。首先，这可能吗？

在 Rails 控制台中，假设 user1 已经被 id 找到，LedgersService.transactions(user1).first 以这种格式返回所有数据：

{:transactable=>{:type=>"存款", :id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022", :transacted_at=> "2019-03-12 19:04:48.715678", :amount_cents=>15, :notes=>"none", :processor=>nil, :details=>nil}, :ledgers=>[{:entry_type=> "credit", :amount_cents=>15, :transacted_at=>"2019-03-12 19:04:48.715678", :user_id=>"72700244-e6b0-4baf-a381-c22bfe56b022", :transactable_type=>"存款" , :transactable_id=>"28cba04f-5b9d-4c9c-afca-b09a6e0e8739"}]}

我试图在我的 React 组件中做类似的事情来尝试获取数据，但是，我不太确定如何设置 LedgersService.transactions 部分。这就是我目前拥有的方式：

我的端点调用：

在我的渲染中进一步向下：

我在 apiService 中的获取：

当我 console.log(ledgers_service.transactions(this.state.user.id)) 时，我得到 ledgers_service.transactions 不是函数的错误。console.log(paginator.count) 但是有效，这是因为事务被设置为数组吗？

在我从 Rails 控制台获得的 React 组件中获取相同端点的正确方法是什么？

我有一个与 rails API 一起运行的 rails 应用程序，在 config/initializers/constants.rb 中有一个 DAYS_LIMIT 的常量值

但现在在应用程序中，我添加了一个输入字段，以便用户决定他的 DAYS_LIMIT。所以我想从 API 模型内部的数据库中获取该值。

我已经放置了断点，可以看到在 API 控制器内部，数据是从应用程序传输的，而不是模型。

作为请求的问题进行编辑，它是一个 React-on-Rails 应用程序，这是将新输入字段保存到数据库的代码（我已删除其他字段，因此问题看起来更短）

从应用程序控制器

这是来自 API 控制器，数据是从应用程序传输的

在这里，我想从 API 模型中获取数据而不是常量。

它应该用今天的日期减去用户输入的值（DAYS_LIMIT），但现在我得到undefined local variable or method如果我尝试直接获取

我有一个由 Webpack 捆绑并由 react_on_rails 提供服务的 React项目。在这个项目中，我使用react-selectSelect中的组件。使用 Webpack 3 时一切都按预期工作。升级到 Webpack 4 后，一切在模式下也按预期工作。但是，当我在模式下构建时，组件 from没有应用任何样式。developmentproductionSelectreact-select

（我没有足够的声誉点来发布图片，所以我将提供图片的链接。）

development这是选择器在内置模式下的样子。

带样式的选择器

production这是选择器在内置模式下的样子。

没有样式的选择器

未应用样式的原因是react-select使用Emotion css-in-js并且 css 被注入样式表的头部。

这是处于development模式时头部的示例。

头部样式表截图

这些标签在when in模式style中都没有。headproduction

我已将其范围缩小到它似乎是由 webpack 缩小步骤引起的。如果我添加

到 my webpack.config.js，则样式在production模式下存在。

这是我webpack.config.js没有optimization添加的：

这是我的package.json

这是使用该组件的Select组件：

任何人都知道为什么 Webpack 4 最小化会阻止react-selectEmotion 样式表被注入以及如何解决这个问题？

我正在使用 Ruby on Rails 和 React 做一些项目。我正在使用react-rails宝石。我对如何正确设计 Rails 和 React 应用程序的架构有一些疑问。我的问题主要是关于在 Rails 和 React 之间传递数据。

我知道主要有两种方法。第一种也是最常见的方法是 Rails 中的单独 API 和 React 中的前端应用程序。这带来了一些优点和缺点。我必须开发和维护两个独立的应用程序，但在未来，我可以轻松地将现有 API 重用于其他东西，例如移动应用程序。通过这种方式，我的前端 React 向 Rails API 请求数据。

我选择的第二种方式和方式是使用内置的Railswebpacker或. 这样，我可以简单地在我的 Rails 控制器中获取数据react-railsreact-on-rails

并将其传递给我的 React 组件

但是当我得到一些具有更多依赖关系的更复杂的模型时，问题就开始了。例如，假设我有一个模型：

现在我想创建一个模型的索引页面，Foo它将显示所有数据并连接到它。在纯 Rails 应用程序中，我可以简单地在控制器中询问，然后在视图中使用. 但是当我使用 react 时，我需要在我的控制器中获取所有这些信息，然后使用它传递给 React 组件，这在我看来会造成很多混乱。Foo'suserBar's@foo@foo.user.nickprops

这是我的问题：在 Rails 和 React 之间传递数据的正确方法是什么？

我正在尝试将 Rails/Webpacker/ReactOnRails 应用程序升级到 webpack 4。我已经包含了对environment.splitChunks. 即放置此代码：

在我的包里。由于这是我的服务器端捆绑包，window因此不存在。有没有办法完全排除这个捆绑包添加 webpackJsonp？

我试过这两种配置：

和

两者最终得到相同的结果。如果我不包含splitChunks，我的代码可以正常工作。

我也刚试过：

和

我认为其中一个会把它放在自己的组中，没有被分块，但没有骰子。

我无法将我的应用推送到 heroku，因为我在运行时收到以下错误

使用以下版本[(ruby-2.6.0)]

./app/javascript/packs/hello-world-bundle.js 中的错误找不到模块：错误：无法解析 '/Users/.../app/ 中的 '../bundles/HelloWorld/components/HelloWorld' javascript/包'

在初始化生成它们的项目之后，我没有触及这些文件。

这是我的packages.json

这是我的 webpacker 配置

我已经在堆栈溢出和 github 问题上尝试了每个线程。请帮忙。

我目前遇到 reactJs + Symfony 4.3 + WebPack 堆栈的问题。我有错误“ReferenceError：未定义窗口”下面是我的 package.jon、composer.json、webpack 配置、控制器 symfony 的代码

这是我的 Composer.Json

这是我的 Package.Json

这是我的 webpack.config.js

我的模板树枝

遇到的错误（由指令react_component引起）附在此处。

谢谢大家谁会给我一个解决方案或跟踪

真诚地