学习Redux.js并构建演示应用程序.
我有一个这样的减速器:
// Imports here
function blocksFunc(state = [], action) {
switch (action.type) {
case 'ADD_BLOCK':
_id++;
return [...state, {'_class' : 'basic', '_id' : _id }];
default:
state = [];
return state;
}
}
const BlockGeneratorReducer = combineReducers({
blocksFunc,
});
export default BlockGeneratorReducer;
我成功更新了状态,但在登录时,我在页面加载时得到以下信息:
blocksFunc()类型:"@@ redux/INIT"
blocksFunc()类型:"@@ redux/PROBE_UNKNOWN_ACTION_b.f.4.qyoav2.t.9"
blocksFunc()类型:"@@ redux/INIT"
所以使用默认的action.type启动了三次blocksFunc函数.行动类型"@@ redux/INIT"在何时启动？"@@ redux/PROBE_UNKNOWN_ACTIOM"可以参考什么？
完整的源代码可以在git上找到:https://github.com/JaakkoKarhu/redux-react-blockgenerator
工作演示上传到我的服务器:http://jaakkokarhu.com/playground/redux-block-generator/
自从React和Redux成为新用户以来,关于源代码的所有其他评论也非常受欢迎.
编辑:
blocksFunc()根据DavidWalshes的建议编辑.
我尝试克隆这样的React元素,将父道具传递给它们(在这个例子中没有分配道具):
React.createElement('div',
{
style: this.props.style
},
React.cloneElement(this.props.children, null)
)
然而,这会返回以下错误:
未捕获的不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.
如果只有一个子节点或者我传递了React.cloneElement(this.props.children [0],null),则没有错误并且会呈现所需的元素.
如何克隆多个元素？
我有以下类型的对象:
{
options: [
{ id: 1, value: 'a' }
],
nestedObj: {
options: [
{ id: 2, value: 'b' }
]
}
}
如何更改第一级和嵌套级别的选项数组中的键'id'？我曾尝试使用lodash但未能获得所需的结果:
{
options: [
{ newKey: 1, value: 'a'
],
nestedObj: {
options: [
{ newKey: 2, value: 'b' }
]
}
}
所以我想找到一个像lodash mapKeys一样工作的函数,但会遍历深层嵌套对象.
当技能正在开发中时，我可以在开发控制台中调用它。在 Echo 或 Amazon Alexa 应用程序中，该技能未调用。
该技能显示在应用程序的技能和游戏选项卡下并已启用。
有谁知道如何解决这个问题？
如果我有三个文件，基本上是这样的：
file_one.js：
const lol = () => {
console.log('Laughing out loud in file_one')
}
const funcOne = () => {
lol()
}
export default funcOne
file_two.js：
const lol = () => {
console.log('Laughing out loud in file_two')
}
const funcTwo = () => {
lol()
}
export default funcTwo
one_and_two_importer.js：
import funcOne from 'file_one'
import funcTwo from 'file_two'
funcOne()
funcTwo()
我的假设是函数 lol 将在全局范围内，从而导致命名空间冲突，但显然这不会发生。此外，如果我尝试在 one_and_two_importer.js 中记录函数 lol，我会收到未定义的错误。
正如文档所说，导入将模块插入到当前范围，但导入模块使用的常量在哪个范围内？
我正在尝试获取一组的前五项。我的查询如下：
query sequence($id: String) {
sequence(id: $id) {
items(first:1) {
content
}
}
}
然而，我得到回应
“类型为“序列”的字段“项目”上的未知参数“第一个”。”
据我从文档中了解到，如果我想取回有限数量的物品，这就是我应该如何进行查询。
我需要在架构中的某个位置定义参数吗？如何正确限制退货数量？
我正在一个项目中工作，我需要创建准确的音频编辑器。
我注意到，Safari 在设置音频的 currentTime 时有一些奇怪的行为。看起来，根据跳转发生的当前时间以及跳转到的位置，实际时间点甚至可能会偏差 2-3 秒。
我做了一个JS 小提琴来演示这个问题。
代码的相关部分如下：
jump.addEventListener('click', function () {
audio.currentTime = jumpToVal;
});
jump2.addEventListener('click', function () {
audio.currentTime = Number.parseInt(jumpToVal) + Number.parseInt(jumpBufferVal);
audio.volume = 0;
setTimeout(function () {
audio.volume = 1;
audio.currentTime = jumpToVal;
}, jumpDelayVal)
});
因此，基本上此示例中发生的情况是，如果在经过该点后尝试在音频中跳转到 8 秒，则音频会在该点之前几秒开始。例如，如果将 currentTime 设置为比该点少 8 秒，并且在延迟跳转到该点后，它会从正确的位置开始播放。
我想强调的是，这很可能只是一个巧合，因为行为的变化取决于设置 currentTime 的位置和时间点。这个问题在这个设置中最为明显。
例如与 Chrome 进行比较，听听差异。
奇怪的是，无论最终结果是什么，音频都会返回相同的 currentTime。因此，换句话说，音频似乎“认为”它处于正确的位置，即使它显然不是。
我的问题是为什么 Safari 的 currentTime 如此不准确？是否有解决此问题的方法？
Safari 版本 12.0 (14606.1.36.1.9)。
我有一个带有 API 的 WP 站点，我正在使用其他站点调用它。我收到这个错误
从源 www.theothersiteurl.com 访问 www.wpsiteurl.com 上的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：'Access-Control-Allow-Origin' 标头包含多个值' www.theothersiteurl.com, *'，但只允许一个。
我在这里和这里找到了解决方案，基本上介绍了将其添加到 register 函数中：
remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
add_action( 'rest_pre_serve_request', function ($value) {
$origin = get_http_origin();
header( 'Access-Control-Allow-Headers: X-Requested-With' );
header( 'Access-Control-Allow-Methods: POST, GET' );
header( 'Access-Control-Allow-Origin: *');
header( 'Access-Control-Allow-Credentials: true');
return $value;
});
对我来说这不起作用，因为它只是返回 * 或任何添加为原点和另一个 *. 更改第二个参数无济于事，似乎在添加此操作后向原点添加了通配符。
我按照答案中的建议编辑了 .htaccess 文件。这适用于我正在测试解决方案的其他环境。然而，在其他服务器上它没有 - 原点被添加到原点字符串中，就像它是用 php.ini 添加的一样。
对我来说，似乎有一些东西阻止了完全覆盖访问控制允许来源和添加到它的力量。
我的问题是：
我想运行gulp-sass并在检查之后生成的css文件的大小是多少.
如果我在gulpfile中有以下内容:
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
});
gulp.task('css.size', ['sass'], function() {
gulp.src(buildPath+'css/style.css')
.pipe(filesize())
})
gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
gulp.watch('./src/**/*.scss', ['sass']);
gulp.watch(buildPath+'css/style.css', ['css.size']);
});
我最终陷入了构建css文件的永无止境的困境,显然是因为css.size任务必须等待sass任务完成.如果我错了,请纠正我.对我来说它没有意义,但我没有找到任何其他解释,特别是因为如果我评论style.css监视任务,sass任务只运行一次,如预期的那样.
现在,如果我像这样修改gulp文件:
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest(buildPath+'css'))
.pipe(connect.reload());
});
gulp.task('css.size', ['sass'], function() {
gulp.src(buildPath+'css/style.css')
.pipe(filesize())
})
gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
gulp.watch('./src/**/*.scss', ['sass', 'css.size']);
});
或者像这样
gulp.task('sass', function () {
gulp.src('src/scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(sass({outputStyle: …我有一个像这样的React组件:
import React, { Component, PropTypes } from 'react';
import SubnavActions from '../../actions/subnav-actions';
import FeedActions from '../../actions/feed-actions';
export default class SubnavItemModule extends Component {
render() {
return (
<div className={'item ' + this.props.active} thumbImg={this.props.thumbImg} _text={this.props._text} _id={this.props._id} onClick={this.handler}>
<p>{this.props._text}</p>
</div>
);
}
handler() {
console.log('subnav-filter-item-module handler launching');
}
};
onClick {this.handler}以前曾经工作过,但现在每次呈现组件时它都会启动onClick事件.
如果我点击它,没有任何反应.
在其他演示中,我成功地使用了onClick = {e => this.handler(e)},但在这项工作中没有任何反应.
在此之前我开始使用Babel 6和Babelify,但我无法真正理解这是什么原因造成的.早些时候我使用了Reactify.所以我的问题如下:
EDITS:
更正了原始代码示例.
这是父模块:
如果你想知道为什么我的写法不同(使用import而不是require),我正在改变语法.如果你问为什么,好吧,我不知道.我只是尝试按照一些教程,看看别人怎么写.我甚至不知道require和import之间的区别.
而且,我刚刚意识到了什么.这可能是因为我没有在父母那里传递任何作为道具的功能吗？
有人与Rails应用程序有类似的问题,这是否提供更多信息:当条件表达式中使用道具时,React rails app不执行onClick处理程序