我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState
不起作用.
典型的错误包括
无法读取未定义的属性'setState'
要么
this.setState不是函数
你知道为什么吗?这是代码:
import React from 'react'
class SomeClass extends React.Component {
constructor(props) {
super(props)
this.state = {inputContent: 'startValue'}
}
sendContent(e) {
console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
}
changeContent(e) {
this.setState({inputContent: e.target.value})
}
render() {
return (
<div>
<h4>The input form is here:</h4>
Title:
<input type="text" ref="someref" value={this.inputContent}
onChange={this.changeContent} />
<button onClick={this.sendContent}>Submit</button>
</div>
)
}
}
export default SomeClass
Run Code Online (Sandbox Code Playgroud) 我是一名为客户制作网站的自由职业者.我有自己的基于React和Node的devstack.目前,当我开发一个新站点时,我只是复制我编写的最后一个项目并修改路由,页面等.当我添加一些新功能(更新webpack 1到2等等)时,我必须在每个项目中手动完成(或者我根本不做).
我想对此采取更专业的方法.你能向我推荐一些材料或态度吗?
我目前的目标是:使用我的devstack(框架)拥有一个repo(私有github并在验证后公开).每次我开始一个新项目时,我都会将它分叉(以便它保持为上游原点)并开始开发.每当我改变一些核心功能或添加我想要在其他项目中的东西时,我想以某种方式将其推送到devstack repo.我也可以手动将此代码复制到devstack,但我不想写两次,所以更好的方法会有所帮助.
我怎么能这样做,我的想法好吗?基本上,一些建议,如果它完全有意义,一些文章的链接将帮助我.谢谢.
基于属性值从List中删除对象的最简单方法是什么?
我正在寻找相当于MongoDB的$ pull.
我的列表看起来像这样简单:
[{a: '1' , b: '1'},{a: '2' , b: '2'}]
Run Code Online (Sandbox Code Playgroud)
我想从数组中删除与属性的对象一组为"1".在MongoDB中,我会这样做:
Model.update({_id: getCorrectParentObj},{ $pull: {listIDeleteFrom: { a: '1' } } },(err, result)=>{});
Run Code Online (Sandbox Code Playgroud)
如何使用ImmutableJS获得相同的结果?
我有一个这种结构的地图:
{
1: {},
2: {}
}
Run Code Online (Sandbox Code Playgroud)
我想从它中删除2:{}(当然 - 如果没有这个,则返回新的集合).我该怎么做?我试过这个,但有些不对劲:
theFormerMap.deleteIn([],2) //[] should mean that it's right in the root of the map, and 2 is the name of the object I want to get rid of
Run Code Online (Sandbox Code Playgroud) 我正在使用Redux和ImmutableJS.在我的SPA(非常复杂的管理系统)中,用户经常将大量数据加载到存储中(许多表的数千行).打开多个页面并在商店中存储过多数据后,应用程序变得非常慢,因为ImmutableJS商店甚至可以包含数百万个条目.
如何从商店"删除"某些内容,以便数据不会减慢应用程序的速度?我知道这将违背其主要原则,但你怎么解决呢?
使用具有例如jQuery的通用网站,这将非常简单.每次刷新页面时,所有不必要的内容都会被垃圾回收.因此,一个页面的2-3,000个条目就可以了,但是当打开一个新页面时,reducer会加载新数据,但旧的数据仍然被引用.
当然,我不想强迫用户重新加载页面.
我有这样的地图(在ImmutableJS中):
{arrayOfValues: [
{one: {inside: 'first in array'}},
{one: {inside: 'second in array'}}
]}
Run Code Online (Sandbox Code Playgroud)
我想更新"arrayOfValues"数组中第二个条目中的"inside"值.我该怎么做?这就是我现在所说的"Uncaught Error:invalid keyPath"
theMap.update('arrayOfValues',(list)=>{
return list.setIn([1,'one','inside'],'updated value');
})
Run Code Online (Sandbox Code Playgroud)
我也直接尝试了这个并没有用:
theMap.setIn(['arrayOfValues',1,'one','inside'],'updated value');
Run Code Online (Sandbox Code Playgroud)
经过几个小时的寻找解决方案,我感谢任何帮助.谢谢.
我想插入一行 JSONB 内容作为原始查询。问题是我在插入任何“非平凡”JSON 对象的任何地方都会出错。
这些是我的原始 SQL 查询的示例:
所有这些错误:SequelizeBaseError:json 类型的输入语法无效
'INSERT INTO "sometable" ("id", "createdAt", "updatedAt", "custom_data") VALUES (DEFAULT, NOW(), NOW(), \'"{something:\"value\"}"\')';
'INSERT INTO "sometable" ("id", "createdAt", "updatedAt", "custom_data") VALUES (DEFAULT, NOW(), NOW(), \'"{\"aaa\":\"ss15\"}"\')';
Run Code Online (Sandbox Code Playgroud)
最后一个有效,但仅适用于整数值:
'INSERT INTO "sometable" ("id", "createdAt", "updatedAt", "custom_data") VALUES (DEFAULT, NOW(), NOW(), \'"{a:10}"\')';
Run Code Online (Sandbox Code Playgroud)
我已经尝试了很多可能的组合来转义类似 JSON 的字符串,甚至插入真正的 JS 对象,但没有任何效果。
假设我有一个ReactJS组件并想要在其中调用一些自定义函数,将此函数作为类方法,或者更确切地说是单独定义是否更好?(假设该函数只应在此组件中使用)
class OnwComponent extends React.Component {
constructor() {
super();
this.doubledNumber = this.doubledNumber.bind(this);
}
doubledNumber(num) {
return num * 2;
}
render() {
return (
<p>{doubledNumber(10)} or {this.doubledNumber(10)}? Pros and cons?
);
}
}
function doubledNumber(num) {
return num * 2;
}
Run Code Online (Sandbox Code Playgroud) 我正在为我的各种 React 组件构建一个高阶组件。在这个 HOC 中,我需要访问孩子的方法并调用它们。我该怎么做?
示例 HOC:
export default function withHOC(Component) {
return class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
if (Component.someFunction) {
Component.someFunction()
}
}
render() {
return <Component {...this.props} />;
}
};
}
Run Code Online (Sandbox Code Playgroud)
示例组件:
class App extends React.Component {
someFunction() {
console.log("something done here, for example setState")
}
render() {
return (
<div></div>
);
}
}
// then it's used like this
export default withHOC(App)
Run Code Online (Sandbox Code Playgroud)
我知道在某些情况下,像这样解决它甚至可能没有意义,但例如框架 Next.js 可以用它的 getInitialProps 函数做类似的事情。
javascript ×6
reactjs ×5
immutable.js ×4
node.js ×2
babeljs ×1
ecmascript-6 ×1
frontend ×1
git ×1
inheritance ×1
open-source ×1
postgresql ×1
redux ×1
sequelize.js ×1