使用异步初始化的prop值设置受控输入的初始状态

Question

我有一个受控输入，它接受名为user的道具。该对象由其父组件传递给它，并在其中用观察者¹异步初始化。

在父组件中：

onAuthStateChanged() {
  this.unregisterAuthObserver = onAuthStateChanged((user) => {
    this.setState({
      isSignedIn: Boolean(user),
      user,
    });
  });
}

我想用user.displayname填充受控输入的初始状态。类似下面的内容，这不应该是反模式，因为状态只依赖于构造上的prop用户。

class ControlledInput extends Component {
  constructor(props) {
    super(props);

    const { user } = props;

    this.state = {
      displayName: user ? user.displayName : '',
    };
  }
}

当我刷新受控输入时，出现以下问题：

1. user的值为undefined，因为观察者尚未触发。组件被构造并将displayname分配给''.
2. 观察者激发，为用户分配一个复杂的对象，React重新呈现组件。这不会更改组件的状态，DisplayName仍然是''。

我被困在如何利用组件生命周期方法来实现这一点上。对于这种情况是否有最佳实践？我应该依赖于异步道具，还是应该将观察者移到受控组件中？

我考虑过使用componentdidupdate()来确定何时分配user，但感觉很难。

当组件更新后，请将此作为对DOM进行操作的机会。这也是一个很好的地方做网络请求，只要你比较当前的道具和以前的道具（例如，如果道具没有改变，网络请求可能是不必要的）。

Answer 1

不需要在构造函数中赋值。您应该使用提供给render方法的道具，并在提升状态模式之后处理对父级中状态的更新。然后流到子组件。

请参见下面的示例。“增量”按钮模拟异步调用。ControlledInput是只读显示，而ControlledInput2允许对反映在状态中的输入进行编辑。

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

    this.handleClick = this.handleClick.bind(this);
    this.onInputChanged = this.onInputChanged.bind(this);

    this.state = {
      user,
      count: 1
    };
  }

  handleClick(e) {
    const { user, count } = this.state;

    this.setState({
      user: { ...user, displayName: `display ${count + 1}` },
      count: count + 1
    });
  }

  onInputChanged(name) {
    this.setState({
      user: Object.assign(user, { displayName: name })
    });
  }

  render() {
    const { user, count } = this.state;

    return (
      <div>
        <ControlledInput user={user} />
        <div>{user.displayName}</div>
        <div>Count: {count}</div>
        <button onClick={this.handleClick}>increment</button>
        <div>
          <ControlledInput2 onInputChanged={this.onInputChanged} user={user} />
        </div>
      </div>
    );
  }
}

const ControlledInput = ({ user }) => 
  <input type="text" value={user.displayName} />;

class ControlledInput2 extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onInputChanged(e.target.value);
  }

  render() {
    const { user } = this.props;
    return (
      <input
        type="text"
        onChange={this.handleChange}
        value={user.displayName}
      />
    );
  }
}

const user = { displayName: undefined };

const props = { user };
const rootElement = document.getElementById("sample");
ReactDOM.render(<Parent {...props} />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<div id="sample"></div>