问题标签 [react-redux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
39214 浏览

javascript - “Stateless function components cannot be given refs”是什么意思?

我有这个:

我得到:

警告:不能给无状态函数组件提供参考(请参阅 Connect(ProjectsSummaryLayout) 创建的 ProjectsSummaryLayout 中的参考“wrappedInstance”)。尝试访问此 ref 将失败。

它想告诉我什么?我真的做错了什么吗?

我在这里看到了关于这个的讨论,但不幸的是我根本不明白这个结论。

0 投票
1 回答
1320 浏览

javascript - 在 react js 中渲染具有 n 个级别的目录结构数据

我有一个目录结构的样本数据集如下

http://www.jsoneditoronline.org/?id=f9ce34de42f1a395e172f81c0c850da1

与目录类似,级别可以是 n 个数字。

在反应中,我想使用带有 onClick 事件的数据创建一个目录结构。例如在第一页上应该显示根目录子目录,当我点击第一个孩子时,应该显示第一个孩子的孩子。

在此处输入图像描述

这就是我想要的,最初只有 3 个文件夹在根级别可见。

在此处输入图像描述

当我在 1 级单击 child2 时,其他两个孩子可见,

示例图像

当再次点击孩子 2 时,它的 2 个孩子是可见的。现在,如果我单击任何其他目录,它的子目录应该是可见的。

你能建议我用redux在reactJs中实现它的正确方法吗?谢谢

0 投票
2 回答
2313 浏览

reactjs - 通过 setRouteLeaveHook 手动移除路由离开钩子集

我想知道如何手动删除特定路线的 setRouteLeaveHook。该页面说在大多数情况下我不需要手动执行此操作,但没有提及如果需要我可以如何执行此操作。

在大多数情况下,您不需要手动拆除路线离开挂钩。离开相关路线后,我们会自动删除所有附加的路线离开钩子。

原因可能最好通过示例来解释。

我遇到的问题在acceptBtn. 在调用 redux-formsresetForm()函数之后,Editor 组件还没有更新(使用新的 props,我不确定为什么),这意味着在dispatch(push(nextLocation));调用时,dirty 仍然设置为 true。

下面是流程的样子:

  1. 单击链接会导致不同的路线。
  2. 第一次调用 routerWillLeave。它调度了一些显示我的对话框的动作(它有两个按钮接受和拒绝)。
  3. 当第一次单击 acceptBtn 时,会再次调用 routeWillLeave(因为它仍然被钩住)。由于某种原因,即使resetForm()已分派组件,此时组件仍未更新,这意味着dirty == true再次执行相同的代码块。
  4. 现在再次单击acceptBtn 将再次触发routerWillLeave,但这一次dirty == false它返回true,并且路由会发生应有的变化。

acceptBtn以下是第一次点击后已经派发的动作。

这是在第二次单击它之后。

因此,我想做的是删除 acceptBtn 的处理函数中的钩子。这可能/可以吗?还是我做错了什么,或者有更好的方法来完成这个?

0 投票
1 回答
86 浏览

javascript - Understanding how to refer to properties in react components

I can not get this basic component to recognize the this object, whatever I try I get the error:

Uncaught TypeError: Cannot read property 'getEvents' of undefined

This is the code im trying to get working:

Why is this undefined at runtime and what do I need to do for this to actually refer to what I want?

0 投票
2 回答
4280 浏览

javascript - 调度动作触发,但 redux 存储不更新

目前在我的 React-Redux 应用程序中,我想使用 React 将 show 的状态设置为 false 或 true。设置为 true 时,应用程序将初始化。(有多个组件,所以使用 react/redux 来做这件事是有意义的。)

但是,我当前的问题是,即使我使用 react redux 连接了我的应用程序,并且使用提供程序连接了我的商店,调度操作仍将被调用,而不更新商店(我正在使用 redux 开发工具进行仔细检查,以及应用程序测试)。

我附上了我认为相关的代码,但是,整个代码库可以作为专门为这个问题制作的分支在这里。我在这方面花了很长时间(实际上是轻描淡写),任何贡献都将不胜感激。

组件相关代码

行动

减速器

谢谢你,再次非常感谢任何帮助。

0 投票
1 回答
968 浏览

reactjs - 如何使用 react-intl v2 + webpack 加载语言环境文件?

我有一个设置来使用 webpack 来管理我的所有资产。它工作正常。现在我打算使用 react-intl version 2 来支持多种语言。

我设法使包'react-intl'中定义的组件工作,

但我无法弄清楚通过 webpack 加载语言环境文件并在组件中引用它们的正确方法是什么。由于该软件包最近进行了重大升级,因此也没有太多关于它的文档。wiki 页面现在是空的

https://github.com/yahoo/react-intl/wiki

我想知道这样做的正确方法是什么?

0 投票
1 回答
262 浏览

javascript - 尝试使用一些实用程序来减少 redux 样板

我想知道我在此链接中尝试的方法是否有问题: https ://t.co/WSV81eDwkr

基本上,这个想法是在添加新动作时只修改动作文件。我正在考虑的改进之一是递归合并从动作传递的状态与减速器的状态。让我知道

0 投票
1 回答
251 浏览

reactjs - 将简单组件包含到 App (react/redux) 时出错

我有一个基于https://github.com/coryhouse/react-slingshot/的样板。我已经删除了 FuelSavings 应用程序并将其替换为可以正常工作的应用程序 - 但我编写了一个组件,当我将它包含在应用程序下时,它会阻止任何内容的呈现(我得到一个白页)。

<UserHeader />将标签添加到 App.js时出现 3 个错误:

  • “警告:React.createElement:类型不应为空、未定义、布尔值或数字。它应该是字符串(对于 DOM 元素)或 ReactClass(对于复合组件)。检查渲染方法App。”
  • Uncaught Invariant Violation:元素类型无效:期望字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。检查App.
  • 未捕获的类型错误:无法读取未定义的属性“道具”

如果我删除UserHeader标签,页面的其余部分加载就好了。

src/components/App.js

src/components/UserHeader.js

欢迎任何想法。服务器本身根本没有显示任何问题,只是关于缺少道具验证的警告。问题是阻止UserHeader执行任何代码。我只是没有足够的经验知道如何!

0 投票
2 回答
2204 浏览

javascript - react-redux react-router store 在 props 中不可用

我刚开始在我的反应站点上使用 redux。相当小。(我正在关注本教程https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.mhkgga84t将一些代码插入到我的反应站点中案子)。但是当我正在进行并尝试访问this.props.store它时,即使我<Provider store={store}>在我的应用程序中也无法使用它。这是我的客户端和应用程序代码(我可以提供更多我只是不知道还要添加什么):

但我无法storethis.props. 它应该在这里可用吗?所以我const { todos, dispatch } = this.props;最终能做到吗?

我错过了什么吗?

0 投票
1 回答
146 浏览

ruby-on-rails - Fetch:为什么我的内容类型发生了变化?

这是一种二合一的问题。我在 Rails 中相当扎实,但在 react/redux 方面是个菜鸟,我正在努力在 react/redux 应用程序上实现身份验证。

我有一个自己构建的 Rails 4 API。它经过了很好的测试并且很稳固。我的 Rails API 正在使用 devise-token-auth gem。

然而,当它发送请求时,我的 API 返回 a401 Unauthorized并且请求失败。

检查服务器日志,我为请求发送的正文没有显示出来。

在浏览器的网络视图中查看请求,我看到了sign_in以下请求:

我看到内容类型是 now text/plain。(有趣的是“接受”是小写的......我也想知道。)

有人可以向我解释发生了什么吗?