Javascript React JS：如何设置孙辈状态

我是一个初级程序员，努力理解我应该如何处理孙子状态（或者看看有孙子状态是否是个好主意）

我的问题是……

1。是否可以通过

this.setState（（prevState））

更改孙子辈？

2。在各州生孙子是个坏主意吗？

为了举例说明，这里是一个组件的构造函数

constructor(props) {
 super(props);
 this.state = {
   input: {
     example: "",
   },
   invalid:{
     example: false
   },
 };
 this.handleChange = this.handleChange.bind(this);
 this.submit = this.submit.bind(this);
}

我将

此.state.invalid

视为孩子，将

此.state.invalid.example

视为孙子。

这是一个JSX

<div className="input">
   <input type="text" value={this.state.input.example || ''} onChange={this.handleChange} />
   { this.state.invalid.example ? <span> This input is invalid </span> : null }
</div>
//Here are similar input fields...

<button onClick={this.submit} type="button">Submit</button>

在本例中，

this.state.invalid.example

应该设置（即更改），但上面的代码不起作用

也许分解此应用程序并将

作为单个组件是一个更好的主意。在这样做之前，我想澄清一下，是否有可能以这种方式为孙子孙女们安排

---

因为我不知道我周围有谁在学习ReactJS，任何建议都将不胜感激

不能逐个状态将祖先组件的状态传递给后代组件。你可以通过道具来完成，但这会导致道具的传递降低很多级别。这也有可能，但这不是一个好办法

最好的方法是使用flux或redux。我更喜欢redux，在redux中，您可以使用connect方法从一个存储中获取对象所需的变量

---

另请检查

我认为在组件中使用嵌套状态本身并不是一个坏主意。但是要记住，

setState

将nextState浅合并到当前状态

看

所以如果你的州是

{ 
  input: {
    example: "asd",
    other: "123"
  },
  invalid: {
    example: false,
    other: false
  }
}

然后调用

setState（{invalid:{example:true}}}）

，结果状态如下

{ 
  input: {
    example: "asd",
    other: "123"
  },
  invalid: {
    example: true
  }
}

注意，

invalid

下的所有内容都被替换为新状态，而

input

下的对象保持不变（即执行浅合并）

在

submit

函数中，我将在循环中创建整个

invalid

对象，然后像这样调用

setState

：

setState（{invalid:invalid}）

---

最后一个代码段中的错误只是语法错误。不能像这样构造对象：

{invalid[key]：true}

，它应该是

{invalid:{[key]：true}}

如果要这样做，方法是：

constructor() {
    this.state = {
        input: {
            example: "",
        },
        invalid:{
            example: false
        },
    };
}

assignChildState(state) {
    var state = Object.assign({}, this.state);
    state.input = Object.assign({}, state.input);
    state.input.example = "New Value";
    this.setState(state);
}

当然，您可以创建一个函数来处理它，例如：

function assignChildState(path, value) {
    var pieces = path.split(".");
    var state = Object.assign({}, this.state);
    var current = state;
    for (var i = 0; i < pieces.length - 1; i++) {
        var piece = pieces[i];
        console.log(current, piece);
        if (current[piece].toString() === "[object Object]") {
            current[piece] = Object.assign({}, current[piece]);
        } else if (typeof current[piece] === "object" /* array */) {
            current[piece] = current[piece].concat();
        }
        current = current[piece];
    }
    current[pieces[i]] = value;
    this.setState(state);
}

它将适当地更新子状态

---

尽管如此，我肯定会研究redux或flux，或者我个人最喜欢的flummox。

可能的重复：不完全是我想要的。。。但这是非常有益的。谢谢分享！谢谢你的代码。可能

{invalid:{example:true}}

会起作用，但将此语法与

this.setState（（prevState，key））

一起使用则不起作用。显然，

key

被视为一个字段名（即，

无效：{key:true}

），而且，我刚刚注意到您调用

setState

，并将函数作为第一个参数。不太确定从何处获得该属性，但

setState

要求将对象作为第一个参数，该参数是粗略地合并到当前状态的对象（即，顶级属性将被覆盖）。很抱歉，答复太晚。我已经尝试了很多东西，现在我觉得Redux是我项目的最佳解决方案。谢谢

function assignChildState(path, value) {
    var pieces = path.split(".");
    var state = Object.assign({}, this.state);
    var current = state;
    for (var i = 0; i < pieces.length - 1; i++) {
        var piece = pieces[i];
        console.log(current, piece);
        if (current[piece].toString() === "[object Object]") {
            current[piece] = Object.assign({}, current[piece]);
        } else if (typeof current[piece] === "object" /* array */) {
            current[piece] = current[piece].concat();
        }
        current = current[piece];
    }
    current[pieces[i]] = value;
    this.setState(state);
}

this.assignChildState("input.example", true);