Question

我想使用道具设置子组件的状态值，然后在相应的表单字段中显示该值。我是在componentDidMount（）里面做的，但是没有用。

代码：

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

  componentDidMount() {
    const tweetCount = this.props.tweetCount;
    this.setState({ tweetCount });
  }

  render() {
    return (
      <React.Fragment>
        <Form>
          <FormGroup>
            <Label for="tweetCount">
              Tweets per Column (between 1 and 30):
              {this.state.tweetCount}
            </Label>
            <Input
              id="tweetCount"
              type="range"
              min="1"
              max="30"
              value={this.state.tweetCount}
              onChange={this.changeTweetCount}
              step="1"
            />
          </FormGroup>
        </Form>
      </React.Fragment>
    );
  }
}

Answer 1

如果您使用的React版本高于16.3，请使用getDerivedStateFromProp，因此在使用componentDidMount或componentWillReceiveProps时请使用以下代码：

static getDerivedStateFromProps(props, state)
{
  return{
    tweetCount:props.tweetCount
  }
}

反应：声明孩子内部没有通过道具更新

1 个答案: