React JS：如何设置孙子状态

Question

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

我的问题是。。。

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);
}

我把this.state.invalid看作是子，而this.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>

当触发onClick={this.submit}时，我想验证函数'this.submit'中的输入。

submit(){
 for (var key in this.state.input) {
   if(!this.state.input[key]){
     this.setState((prevState, key) => ({
        invalid[key]:true, //This causes an error, saying that "SyntaxError: Unexpected token, expected ,"
    }));
   }
 }

在这个例子中，this.state.invalid.example应该被设置（即更改），但是上面的代码不起作用。

也许分解此应用程序并生成

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




Answer 1

如果您想这样做，方法是：

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);
}

然后你可以做：

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

它将适当地更新子状态。

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

Answer 2

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

将nextState浅合并到当前状态

请参阅react文档中的。

所以如果你的州是

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

然后调用setState（{invalid:{example:true}}}），结果状态如下

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

注意，invalid下的所有内容都被替换为新状态，而input下的对象保持不变（即执行浅合并）。

在您的提交函数中，我将在循环中创建整个无效对象，然后像这样调用setState。

最后一个代码段中的错误只是语法错误。不能像这样构造对象：{invalid[key]：true}，它应该是{invalid:{[key]：true}。

Answer 3

不能按状态将祖先组件的状态传递给后代组件。你可以通过道具来完成，但它会导致道具向下传递许多级别。上下文也有可能，但这也不是好方法。

最好的方法是使用助焊剂或还原剂。我更喜欢redux，在redux中，你可以通过使用连接方法从一个存储中获取你的对象需要的变量。

https://github.com/reactjs/react-redux/blob/master/docs/api.md

也检查这些视频