Question

鉴于以下组件结构，我不想在Parent中更新我的状态，然后应该更新我的GrandChild。我知道我可以使它工作使Child无状态或只更新Child中的State但在我们的应用程序中这是当前的结构。有没有什么好方法可以做到这一点，还是我们应该重新设计？我们在父母中保持一个州，因为我们不会在应用程序中发出许多http请求。在父级中，我们获取所需的数据并进行初始修改。然后将这些数据发送到其他组件，而这些组件又具有子组件，因此是示例结构。

此示例中打印的内容为：Test: 1235

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface IProps {
}

interface IState {
  cases: number[];
}

class Parent extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      cases: [1, 2, 3],
    };
  }

  componentDidMount() {
    let newCase = 4;
    let newCases = Array.from(this.state.cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  render() {
    return (
      <div>
        <Child cases={this.state.cases} />
      </div>
    );
  }
}

interface IChildProps {
  cases: number[];
}

interface IChildState {
  cases: number[];
}

class Child extends React.Component<IChildProps, IChildState> {
  constructor(props: IChildProps) {
    super(props);
    this.state = {
      cases: this.props.cases,
    };
  }

  componentDidMount() {
    let newCase = 5;
    let newCases = Array.from(this.state.cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  render() {
    return (
      <GrandChild cases={this.state.cases} />
    );
  }
}

interface IGrandChildProps {
  cases: number[];
}

interface IGrandChildState {
}

class GrandChild extends React.Component<IGrandChildProps, IGrandChildState> {
  constructor(props: IGrandChildProps) {
    super(props);
  }

  render() {
    return (
      <div>
        Test: {this.props.cases.map((value, index) => {
          return <span key={index}>{value}</span>
        }
        )}
      </div>
    );
  }
}

export default Parent

Answer 1

这里的问题是你将道具映射到状态，一旦发生这种情况，你就是在道具改变时负责更新状态的人。由于您只使用componentDidMount，因此它只会将道具映射到状态一次。我通常倾向于避免让组件将道具转换为自己的状态，而只是让父母以任何需要的方式将道具传递给孩子，而不必担心在子组件中道具改变时改变状态。

另一种选择是使用componentWillReceiveProps生命周期方法并执行以下操作

 setCases(cases) {
    let newCase = 5;
    let newCases = Array.from(cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  componentDidMount() {
    this.setCases(this.props.cases)
  }

  componentWillReceiveProps(nextProps) {
    this.setCases(nextProps.cases);
  }

componentDidMount将处理在初始加载时设置状态，然后componentWillReceiveProps将处理在道具更改时更改状态。

React 16.0.0 Parent Child GrandChild。在Parent中更新状态不会更新GrandChild

1 个答案: