javascript - React.js : Why child component change parent state?

Question

为什么在这个例子中子组件改变父组件状态？根据 Facebook(react.js) 文档，State 与 props 类似，但它是私有(private)的并且完全由组件控制。

codepen example

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: this.props.data};
  }

  handleChange(event) {
    let updatedData = Object.assign({}, this.state.data);
    updatedData[event.target.name][event.target.dataset.lang] = event.target.value;

    this.setState({
      data: updatedData
    });
  }

  render() {
    return (
      <form>
          {Object.keys(this.props.data.titles).map((l, index) => 
          <input type="text" name="titles" data-lang={l} value={this.state.data.titles[l]} onChange={this.handleChange.bind(this)} />
          )}
      </form>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      images: [{"titles": {"en": "deluxe1500x930.jpg"}
      }],
      count: 1
    };
  }

  render() {
    return (
        <div>
          {Object.keys(this.state.images).map((x,index) => 
            <div>
              {this.state.images[x].titles.en}
              <NameForm data={this.state.images[x]} />
              <button onClick={(() => {this.setState({ count: 2 })}).bind(this)}>test</button>
            </div>
          )}
        </div>
    )
  }
}

Answer 1

因为你用this.props.data设置了状态。this.props.data 来自父级，因此当它发生变化时，状态也会发生变化。

解决方案很简单，只需使用展开运算符而不是使用相同的引用来设置新值(从 this.props.data 复制)的状态即可。

this.state = {data: ...this.props.data};