我正在尝试使用这样的嵌套属性来组织我的状态:
this.state = {
someProperty: {
flag:true
}
}
但是像这样更新状态,
this.setState({ someProperty.flag: false });
不起作用。如何正确地做到这一点?
为了setState
嵌套对象,您可以遵循以下方法,因为我认为 setState 不处理嵌套更新。
var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})
这个想法是创建一个虚拟对象对其执行操作,然后用更新的对象替换组件的状态
现在,展开运算符只创建对象的一级嵌套副本。如果您的状态高度嵌套,例如:
this.state = {
someProperty: {
someOtherProperty: {
anotherProperty: {
flag: true
}
..
}
...
}
...
}
您可以 setState 在每个级别使用扩展运算符,例如
this.setState(prevState => ({
...prevState,
someProperty: {
...prevState.someProperty,
someOtherProperty: {
...prevState.someProperty.someOtherProperty,
anotherProperty: {
...prevState.someProperty.someOtherProperty.anotherProperty,
flag: false
}
}
}
}))
然而,随着状态变得越来越嵌套,上述语法变得越来越难看,因此我建议您使用 immutability-helper
包来更新状态。
请参阅 this answer,了解如何使用 immutability-helper
更新状态。
写在一行
this.setState({ someProperty: { ...this.state.someProperty, flag: false} });
setState
之后立即阅读 this.state
并期望它具有新值。与在 setState
中调用 this.state
相比。还是后者还有一个我不清楚的问题?
setState
之后访问this.state
的问题。此外,我们没有将 this.state
传递给 setState
。 …
运算符展开属性。它与 Object.assign() 相同。 github.com/tc39/proposal-object-rest-spread
this.setState(currentState => { someProperty: { ...currentState.someProperty, flag: false} });
可以避免这个问题?
有时直接的答案不是最好的:)
精简版:
这段代码
this.state = {
someProperty: {
flag: true
}
}
应该简化为
this.state = {
somePropertyFlag: true
}
长版:
目前你不应该在 React 中使用嵌套状态。因为 React 不适合使用嵌套状态,并且这里提出的所有解决方案看起来都是 hack。他们不使用框架,而是与之抗争。他们建议编写不太清晰的代码,用于对某些属性进行分组的可疑目的。因此,它们作为挑战的答案非常有趣,但实际上毫无用处。
让我们想象一下以下状态:
{
parent: {
child1: 'value 1',
child2: 'value 2',
...
child100: 'value 100'
}
}
如果只更改 child1
的值会发生什么? React 不会重新渲染视图,因为它使用浅比较,并且它会发现 parent
属性没有改变。顺便说一句,直接改变状态对象通常被认为是一种不好的做法。
因此,您需要重新创建整个 parent
对象。但在这种情况下,我们会遇到另一个问题。 React 会认为所有的孩子都改变了他们的价值观,并会重新渲染所有的孩子。当然,这对性能不利。
仍然可以通过在 shouldComponentUpdate()
中编写一些复杂的逻辑来解决该问题,但我更愿意在这里停下来并使用简短版本中的简单解决方案。
免责声明
React 中的嵌套状态是错误的设计阅读这个出色的答案。
这个答案背后的推理:React 的 setState 只是一种内置的便利,但您很快就会意识到它有其局限性。使用自定义属性和智能使用 forceUpdate 可以为您提供更多。例如:class MyClass extends React.Component { myState = someObject inputValue = 42 ... MobX,例如,完全抛弃状态并使用自定义的可观察属性。在 React 组件中使用 Observables 而不是 state。
你的痛苦的答案 - 见这里的例子
还有另一种更短的方法来更新任何嵌套属性。
this.setState(state => {
state.nested.flag = false
state.another.deep.prop = true
return state
})
在一条线上
this.setState(state => (state.nested.flag = false, state))
注意:这里是 Comma operator ~MDN,查看实际操作 here (Sandbox)。
它类似于(尽管这不会改变状态参考)
this.state.nested.flag = false
this.forceUpdate()
有关 forceUpdate
和 setState
在此上下文中的细微差别,请参阅链接的 example 和 sandbox。
当然这是滥用一些核心原则,因为 state
应该是只读的,但是由于您立即丢弃旧状态并用新状态替换它,所以完全可以。
警告
即使包含状态的组件将正确更新和重新渲染(except this gotcha),道具将无法传播给子 (请参阅下面的 Spymaster 评论)。仅当您知道自己在做什么时才使用此技术。
例如,您可以传递一个已更改的平面道具,该道具可以轻松更新和传递。
render(
//some complex render with your nested state
<ChildComponent complexNestedProp={this.state.nested} pleaseRerender={Math.random()}/>
)
现在即使 complexNestedProp 的参考没有改变 (shouldComponentUpdate)
this.props.complexNestedProp === nextProps.complexNestedProp
每当父组件更新时,组件将重新呈现,在父组件中调用 this.setState
或 this.forceUpdate
后就是这种情况。
改变状态沙箱的影响
使用 嵌套状态 并直接改变状态是危险的,因为不同的对象可能(有意或无意地)持有对 state 的不同(旧)引用,并且可能不一定知道何时更新(例如,当使用 PureComponent
或 shouldComponentUpdate
实现返回 false
时)OR 旨在显示旧数据,如下例所示。
想象一个应该呈现历史数据的时间线,改变手下的数据将导致意外行为,因为它也会改变以前的项目。
https://i.stack.imgur.com/Hl7fa.gif
无论如何,在这里您可以看到 Nested PureChildClass
由于 props 未能传播而没有重新渲染。
this.forceUpdate()
或实现特定的 shouldComponentUpdate
。
this.setState(state => (state.nested.flag = false, state))
中的 (expression1, expression2) 会这样工作? (文档、mdn、搜索请求等)
setState
调用中只返回一个空对象 (exp1, {})
也可以,但我不想不必要地创建新对象。 sandbox
如果您使用的是 ES2015,您可以访问 Object.assign。您可以按如下方式使用它来更新嵌套对象。
this.setState({
someProperty: Object.assign({}, this.state.someProperty, {flag: false})
});
您将更新的属性与现有的属性合并,并使用返回的对象来更新状态。
编辑:向分配函数添加了一个空对象作为目标,以确保状态不会像 carkod 指出的那样直接发生突变。
const newState = Object.assign({}, this.state);
newState.property.nestedProperty = "new value";
this.setState(newState);
property
包含多个嵌套属性,第一个将删除它们,第二个不会。 codesandbox.io/s/nameless-pine-42thu
我们使用 Immer https://github.com/mweststrate/immer 来处理这类问题。
刚刚在我们的一个组件中替换了这段代码
this.setState(prevState => ({
...prevState,
preferences: {
...prevState.preferences,
[key]: newValue
}
}));
有了这个
import produce from 'immer';
this.setState(produce(draft => {
draft.preferences[key] = newValue;
}));
使用 immer,您可以将状态作为“普通对象”处理。魔术发生在代理对象的幕后。
有很多图书馆可以帮助解决这个问题。例如,使用 immutability-helper:
import update from 'immutability-helper';
const newState = update(this.state, {
someProperty: {flag: {$set: false}},
};
this.setState(newState);
使用 lodash/fp 集:
import {set} from 'lodash/fp';
const newState = set(["someProperty", "flag"], false, this.state);
使用 lodash/fp 合并:
import {merge} from 'lodash/fp';
const newState = merge(this.state, {
someProperty: {flag: false},
});
lodash
,您可能想尝试 _.cloneDeep
并将状态设置为克隆副本。
lodash/fp
的答案,所以我们不必担心突变。
merge
或 set
函数有什么好处吗?
this.setState(newState)
。另一个问题是 lodash .set
(non-fp) 有不同的参数顺序,这让我有一段时间感到困惑。
this.setState(newState)
时,它会在 this.state
中创建另一个名为 newState
的状态项。知道为什么吗?
尽管您询问了基于类的 React 组件的状态,但 useState 挂钩也存在同样的问题。更糟糕的是:useState 挂钩不接受部分更新。因此,当引入 useState 挂钩时,这个问题变得非常重要。
我决定发布以下答案,以确保问题涵盖使用 useState 挂钩的更现代场景:
如果你有:
const [state, setState] = useState({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })
您可以通过克隆当前数据并修补所需的数据段来设置嵌套属性,例如:
setState(current => { ...current, someProperty: { ...current.someProperty, flag: false } });
或者您可以使用 Immer 库来简化对象的克隆和修补。
或者您可以使用 Hookstate library(免责声明:我是作者)完全简单地管理复杂(本地和全局)状态数据并提高性能(阅读:不用担心渲染优化):
import { useStateLink } from '@hookstate/core'
const state = useStateLink({ someProperty: { flag: true, otherNestedProp: 1 }, otherProp: 2 })
获取要渲染的字段:
state.nested.someProperty.nested.flag.get()
// or
state.get().someProperty.flag
设置嵌套字段:
state.nested.someProperty.nested.flag.set(false)
这是 Hookstate 示例,其中状态深度/递归嵌套在 tree-like data structure 中。
这是此线程中给出的第一个答案的变体,不需要任何额外的包、库或特殊功能。
state = {
someProperty: {
flag: 'string'
}
}
handleChange = (value) => {
const newState = {...this.state.someProperty, flag: value}
this.setState({ someProperty: newState })
}
为了设置特定嵌套字段的状态,您已经设置了整个对象。我通过创建一个变量 newState
并使用 ES2015 spread operator首先将当前状态的内容传播到其中来做到这一点。然后,我将 this.state.flag
的值替换为新值(由于我设置 flag: value
之后 将当前状态传播到对象中,当前状态中的 flag
字段被覆盖) .然后,我只需将 someProperty
的状态设置为我的 newState
对象。
我使用了这个解决方案。
如果您有这样的嵌套状态:
this.state = {
formInputs:{
friendName:{
value:'',
isValid:false,
errorMsg:''
},
friendEmail:{
value:'',
isValid:false,
errorMsg:''
}
}
您可以声明复制当前状态并使用更改的值重新分配它的 handleChange 函数
handleChange(el) {
let inputName = el.target.name;
let inputValue = el.target.value;
let statusCopy = Object.assign({}, this.state);
statusCopy.formInputs[inputName].value = inputValue;
this.setState(statusCopy);
}
这里是带有事件监听器的 html
<input type="text" onChange={this.handleChange} " name="friendName" />
Object.assign
只做一个浅拷贝,所以你正在改变一个嵌套对象。不要改变以前的状态。
尽管嵌套并不是你真正应该如何对待组件状态的方式,但有时对于单层嵌套来说很容易。
对于这样的状态
state = {
contact: {
phone: '888-888-8888',
email: 'test@test.com'
}
address: {
street:''
},
occupation: {
}
}
我使用的可重复使用的方法看起来像这样。
handleChange = (obj) => e => {
let x = this.state[obj];
x[e.target.name] = e.target.value;
this.setState({ [obj]: x });
};
然后只需为您要处理的每个嵌套传递 obj 名称...
<TextField
name="street"
onChange={handleChange('address')}
/>
创建状态的副本:
let someProperty = JSON.parse(JSON.stringify(this.state.someProperty))
对此对象进行更改:
someProperty.flag = "false"
现在更新状态
this.setState({someProperty})
根据框架的标准,不确定这在技术上是否正确,但有时您只需要更新嵌套对象。这是我使用钩子的解决方案。
setInputState({ ...inputState, [parentKey]: { ...inputState[parentKey], [childKey]: value }, });
我看到每个人都给出了基于类的组件状态更新解决方案,这是预期的,因为他要求这样做,但我试图为钩子提供相同的解决方案。
const [state, setState] = useState({
state1: false,
state2: 'lorem ipsum'
})
现在,如果您只想更改嵌套对象键 state1,则可以执行以下任何操作:
过程 1
let oldState = state;
oldState.state1 = true
setState({...oldState);
过程 2
setState(prevState => ({
...prevState,
state1: true
}))
我最喜欢过程2。
尚未提及的另外两个选项:
如果您有深度嵌套的状态,请考虑是否可以将子对象重组为位于根部。这使得数据更容易更新。有许多方便的库可用于处理 Redux 文档中列出的不可变状态。我推荐 Immer,因为它允许您以可变方式编写代码,但在幕后处理必要的克隆。它还会冻结生成的对象,因此您以后不会意外地对其进行变异。
为了使事情通用,我研究了@ShubhamKhatri 和@Qwerty 的答案。
状态对象
this.state = {
name: '',
grandParent: {
parent1: {
child: ''
},
parent2: {
child: ''
}
}
};
输入控件
<input
value={this.state.name}
onChange={this.updateState}
type="text"
name="name"
/>
<input
value={this.state.grandParent.parent1.child}
onChange={this.updateState}
type="text"
name="grandParent.parent1.child"
/>
<input
value={this.state.grandParent.parent2.child}
onChange={this.updateState}
type="text"
name="grandParent.parent2.child"
/>
更新状态方法
setState 作为@ShubhamKhatri 的回答
updateState(event) {
const path = event.target.name.split('.');
const depth = path.length;
const oldstate = this.state;
const newstate = { ...oldstate };
let newStateLevel = newstate;
let oldStateLevel = oldstate;
for (let i = 0; i < depth; i += 1) {
if (i === depth - 1) {
newStateLevel[path[i]] = event.target.value;
} else {
newStateLevel[path[i]] = { ...oldStateLevel[path[i]] };
oldStateLevel = oldStateLevel[path[i]];
newStateLevel = newStateLevel[path[i]];
}
}
this.setState(newstate);
}
setState 作为@Qwerty 的回答
updateState(event) {
const path = event.target.name.split('.');
const depth = path.length;
const state = { ...this.state };
let ref = state;
for (let i = 0; i < depth; i += 1) {
if (i === depth - 1) {
ref[path[i]] = event.target.value;
} else {
ref = ref[path[i]];
}
}
this.setState(state);
}
注意:以上这些方法不适用于数组
我非常重视有关创建组件状态的完整副本的问题already voiced。话虽如此,我强烈建议Immer。
import produce from 'immer';
<Input
value={this.state.form.username}
onChange={e => produce(this.state, s => { s.form.username = e.target.value }) } />
这应该适用于 React.PureComponent
(即 React 的浅层状态比较),因为 Immer
巧妙地使用代理对象来有效地复制任意深度的状态树。与 Immutability Helper 等库相比,Immer 的类型安全性更高,非常适合 Javascript 和 Typescript 用户。
打字稿实用功能
function setStateDeep<S>(comp: React.Component<any, S, any>, fn: (s:
Draft<Readonly<S>>) => any) {
comp.setState(produce(comp.state, s => { fn(s); }))
}
onChange={e => setStateDeep(this, s => s.form.username = e.target.value)}
如果要动态设置状态
以下示例动态设置表单状态,其中状态中的每个键都是对象
onChange(e:React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
this.setState({ [e.target.name]: { ...this.state[e.target.name], value: e.target.value } });
}
我发现这对我有用,在我的情况下有一个项目表单,例如你有一个 id 和一个名称,我宁愿维护嵌套项目的状态。
return (
<div>
<h2>Project Details</h2>
<form>
<Input label="ID" group type="number" value={this.state.project.id} onChange={(event) => this.setState({ project: {...this.state.project, id: event.target.value}})} />
<Input label="Name" group type="text" value={this.state.project.name} onChange={(event) => this.setState({ project: {...this.state.project, name: event.target.value}})} />
</form>
</div>
)
让我知道!
stateUpdate = () => {
let obj = this.state;
if(this.props.v12_data.values.email) {
obj.obj_v12.Customer.EmailAddress = this.props.v12_data.values.email
}
this.setState(obj)
}
obj
只是对状态的引用,所以通过它你正在改变实际的 this.state
对象
这显然不是正确或最好的方法,但在我看来它更清晰:
this.state.hugeNestedObject = hugeNestedObject;
this.state.anotherHugeNestedObject = anotherHugeNestedObject;
this.setState({})
然而,React 本身应该迭代思想嵌套对象并相应地更新状态和 DOM,而这还不存在。
将此用于多个输入控件和动态嵌套名称
<input type="text" name="title" placeholder="add title" onChange={this.handleInputChange} />
<input type="checkbox" name="chkusein" onChange={this.handleInputChange} />
<textarea name="body" id="" cols="30" rows="10" placeholder="add blog content" onChange={this.handleInputChange}></textarea>
代码非常可读
处理程序
handleInputChange = (event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
const newState = { ...this.state.someProperty, [name]: value }
this.setState({ someProperty: newState })
}
以下是使用 solution in this answer 的嵌套状态(一级)的完整示例,用于实现为类的组件:
class CaveEditModal extends React.Component {
// ...
constructor(props, context) {
super(props);
this.state = {
tabValue: '1',
isModalOpen: this.props.isModalOpen,
// ...
caveData: {
latitude: 1,
longitude: 2
}
};
// ...
const updateNestedFieldEvent = fullKey => ev => {
var [parentProperty, _key] = fullKey.split(".", 2);
this.setState({[parentProperty]: { ...this.state[parentProperty], [_key]: ev.target.value} });
};
// ...
this.handleLatitudeChange = updateNestedFieldEvent('caveData.latitude');
this.handleLongitudeChange = updateNestedFieldEvent('caveData.longitude');
}
render () {
return (
<div>
<TextField id="latitude" label="Latitude" type="number" value={this.state.caveData.latitude} onChange={this.handleLatitudeChange} />
<TextField id="longitude" label="Longitude" type="number" value={this.state.caveData.longitude} onChange={this.handleLongitudeChange} />
<span>lat={this.state.caveData.latitude} long={this.state.caveData.longitude}</span>
</div>
);
};
}
请注意,状态更新器函数 updateNestedFieldEvent
仅适用于像 a.b
这样的一级嵌套对象,而不像 a.b.c
。
这样的事情可能就足够了,
const isObject = (thing) => {
if(thing &&
typeof thing === 'object' &&
typeof thing !== null
&& !(Array.isArray(thing))
){
return true;
}
return false;
}
/*
Call with an array containing the path to the property you want to access
And the current component/redux state.
For example if we want to update `hello` within the following obj
const obj = {
somePrimitive:false,
someNestedObj:{
hello:1
}
}
we would do :
//clone the object
const cloned = clone(['someNestedObj','hello'],obj)
//Set the new value
cloned.someNestedObj.hello = 5;
*/
const clone = (arr, state) => {
let clonedObj = {...state}
const originalObj = clonedObj;
arr.forEach(property => {
if(!(property in clonedObj)){
throw new Error('State missing property')
}
if(isObject(clonedObj[property])){
clonedObj[property] = {...originalObj[property]};
clonedObj = clonedObj[property];
}
})
return originalObj;
}
const nestedObj = {
someProperty:true,
someNestedObj:{
someOtherProperty:true
}
}
const clonedObj = clone(['someProperty'], nestedObj);
console.log(clonedObj === nestedObj) //returns false
console.log(clonedObj.someProperty === nestedObj.someProperty) //returns true
console.log(clonedObj.someNestedObj === nestedObj.someNestedObj) //returns true
console.log()
const clonedObj2 = clone(['someProperty','someNestedObj','someOtherProperty'], nestedObj);
console.log(clonedObj2 === nestedObj) // returns false
console.log(clonedObj2.someNestedObj === nestedObj.someNestedObj) //returns false
//returns true (doesn't attempt to clone because its primitive type)
console.log(clonedObj2.someNestedObj.someOtherProperty === nestedObj.someNestedObj.someOtherProperty)
我知道这是一个老问题,但仍然想分享我是如何做到这一点的。假设构造函数中的状态如下所示:
constructor(props) {
super(props);
this.state = {
loading: false,
user: {
email: ""
},
organization: {
name: ""
}
};
this.handleChange = this.handleChange.bind(this);
}
我的 handleChange
函数是这样的:
handleChange(e) {
const names = e.target.name.split(".");
const value = e.target.type === "checkbox" ? e.target.checked : e.target.value;
this.setState((state) => {
state[names[0]][names[1]] = value;
return {[names[0]]: state[names[0]]};
});
}
并确保您相应地命名输入:
<input
type="text"
name="user.email"
onChange={this.handleChange}
value={this.state.user.firstName}
placeholder="Email Address"
/>
<input
type="text"
name="organization.name"
onChange={this.handleChange}
value={this.state.organization.name}
placeholder="Organization Name"
/>
state[names[0]][names[1]] = value
这会改变之前的状态对象,这是 React 的反模式。
我使用减少搜索进行嵌套更新:
例子:
状态中的嵌套变量:
state = {
coords: {
x: 0,
y: 0,
z: 0
}
}
功能:
handleChange = nestedAttr => event => {
const { target: { value } } = event;
const attrs = nestedAttr.split('.');
let stateVar = this.state[attrs[0]];
if(attrs.length>1)
attrs.reduce((a,b,index,arr)=>{
if(index==arr.length-1)
a[b] = value;
else if(a[b]!=null)
return a[b]
else
return a;
},stateVar);
else
stateVar = value;
this.setState({[attrs[0]]: stateVar})
}
利用:
<input
value={this.state.coords.x}
onChange={this.handleTextChange('coords.x')}
/>
a[b] = value
这会改变 this.state[attrs[0]]
返回的嵌套状态对象。不要改变当前状态对象。
这是我的初始状态
const initialStateInput = {
cabeceraFamilia: {
familia: '',
direccion: '',
telefonos: '',
email: ''
},
motivoConsulta: '',
fechaHora: '',
corresponsables: [],
}
钩子或者你可以用状态(类组件)替换它
const [infoAgendamiento, setInfoAgendamiento] = useState(initialStateInput);
handleChange 的方法
const actualizarState = e => {
const nameObjects = e.target.name.split('.');
const newState = setStateNested(infoAgendamiento, nameObjects, e.target.value);
setInfoAgendamiento({...newState});
};
使用嵌套状态设置状态的方法
const setStateNested = (state, nameObjects, value) => {
let i = 0;
let operativeState = state;
if(nameObjects.length > 1){
for (i = 0; i < nameObjects.length - 1; i++) {
operativeState = operativeState[nameObjects[i]];
}
}
operativeState[nameObjects[i]] = value;
return state;
}
最后这是我使用的输入
<input type="text" className="form-control" name="cabeceraFamilia.direccion" placeholder="Dirección" defaultValue={infoAgendamiento.cabeceraFamilia.direccion} onChange={actualizarState} />
如果你在你的项目中使用 formik,它有一些简单的方法来处理这些东西。这是使用 formik 最简单的方法。
首先在 formik initivalues 属性或反应中设置初始值。状态
这里,初始值是在反应状态中定义的
state = {
data: {
fy: {
active: "N"
}
}
}
为 formik initiValues
属性内的 formik 字段定义上述初始值
<Formik
initialValues={this.state.data}
onSubmit={(values, actions)=> {...your actions goes here}}
>
{({ isSubmitting }) => (
<Form>
<Field type="checkbox" name="fy.active" onChange={(e) => {
const value = e.target.checked;
if(value) setFieldValue('fy.active', 'Y')
else setFieldValue('fy.active', 'N')
}}/>
</Form>
)}
</Formik>
制作一个控制台来检查更新到 string
的状态,而不是 boolean
formik setFieldValue
函数来设置状态或使用 react 调试器工具来查看 formik 状态值的变化。
试试这个代码:
this.setState({ someProperty: {flag: false} });
someProperty
引用的对象中存在的任何其他属性,并且在执行上述代码后,仅 flag
属性将保留
someProperty
并且我们正在修改它this.setState((prevState) => ({nested: {...prevState.nested, propertyToSet: newValue}})
虽然有点乏味.........prevState,
,您只需要someProperty
及其子项