Question

我是一名初学React程序员，正在努力理解我应该如何处理孙子国家（或者看看让孙子国家成为一个好主意）。

我的问题是......

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}被解雇时，我想验证函数中的输入，＆＃39; this.submit＆＃39;。

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应该设置（即更改），但上面的代码不起作用。

分享此应用并使<div className="input">成为单个组件可能更好。在此之前，我想澄清是否有可能以这种方式设置孙子。

由于我不认识我周围的人正在学习ReactJS，所以我们将不胜感激任何建议！

Answer 1

您不能通过状态将祖先组件的状态传递给后代组件。你可以通过道具来做到这一点，但它会导致道具通过很多级别。 context也有可能，但也不是好事。

最好的方法是使用助焊剂或还原剂。我更喜欢redux和redux，你可以使用connect方法从一个商店获得你的对象需要的变量。

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

同时检查these videos

Answer 2

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

执行nextState到当前状态的浅层合并

请参阅in the react documentation。

所以如果你的州是

{ 
  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}}。

Answer 3

如果你想这样做，那么做的方法是：

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。

React JS：如何设置孙子国家

3 个答案: