在 React State 中使用原型

Question

我正在尝试使用原型来更轻松地从深度嵌套的 object 中查找数据。 问题是，当我使用 lodash 的cloneDeep function 时，原型链已损坏（我很确定）。 我正在使用cloneDeep function 以确保不直接突变 state。

在用项目中的一些代码浪费任何人的时间之前，这是一个好的做法吗？ 在 state 中存储对象时，执行以下操作是否正确或应避免使用原型？

const parent = { a: { b: { c: null }}}
const child = Object.create(parent)
parent.a.b.c = child

this.setState({ parent }) 

提前感谢您的帮助:)

Answer 1

我会选择任何用作 state 的深度嵌套抽象。 您的 state应尽可能平坦。 嵌套会产生非常错误的代码，更新成为一项艰巨的任务。

constructor() {
    this.state = {foo: 'bar', a: 1, b: 2}
}

handleEvent(event) {
    this.setState({ ...this.state, foo: event.target.value })
}

render() {
    const { foo, a, b } = this.state
    // ...
}

不过，这并不是 React 真正的发展方向。 我建议查看最新的发行说明。

Answer 2

a）我建议使用 typescript 而不是 proptypes。 它更强大、更高效。

b) 您不需要 lodash 来深度克隆 object。 做就是了：

 const objectA = {name: "Joe", age: 44} const clonedObjectA = {...objectA} // mutate clonedObject clonedObjectA.name= "Paul", console.log("objectA", objectA) // original untouched console.log("clonedObjectA", clonedObjectA) // new Object mutated

然后，您可以在clonedObjectA上执行突变，而不必担心 objectA。

c) 当改变 state 时，您可以像这样简单地使用 prevState：

 const [state, setState] = useState({}) const mutateState = (key, value) => { setState(prevState=> ({...prevState, key: value})) }