Javascript 预填充受控组件

在我尝试处理更新表单时，我编写了以下代码。它是一个受控输入组件，具有相应的状态值。当输入组件发生更改时，状态值将更新。这意味着视图将始终反映数据更改，反之亦然。我的问题出现在尝试使用从数据库获取的数据预填充输入组件时。我的尝试是在构造函数中定义初始状态值，使其等于传递的道具，但这不起作用。当组件首次渲染时，它将不包含传递的spirit道具，因为它尚未被提取。当第二次呈现组件时（因为数据已准备就绪），将不会调用构造函数。当数据准备就绪而不是之前，我将如何设置初始状态

SpiritsEditContainer

export default createContainer(({params}) => {
    const handle = Meteor.subscribe("spirit", params.id);

    return {
        loading: !handle.ready(),
        spirit: Spirits.find(params.id).fetch()[0]
    }
}, SpiritsEditPage);

SpiritsEditPage

export default class SpiritsEditPage extends Component {
    constructor(props) {
        super(props)

        this.state = {name: this.props.spirit.name}
    }

    handleNameChange(event) {
        this.setState({name: event.target.value});
    }

    handleUpdate(event) {
        event.preventDefault();
    }

    render() {
        const {name} = this.state;

        if (this.props.loading) {
            return <div>loading</div>
        } else {
            return (
                <div>
                    <h1>SpiritsEditPage</h1>

                    <form onSubmit={this.handleUpdate.bind(this)}>
                        <Input type="text"
                               label="Name"
                               value={name}
                               onChange={this.handleNameChange.bind(this)}/>


                        <button>Update</button>
                    </form>
                </div>
            )
        }
    }
}

导出默认类SpiritsEditPage扩展组件{
建造师（道具）{
超级（道具）
this.state={name:this.props.spirit.name}
}
handleNameChange（事件）{
this.setState（{name:event.target.value}）；
}
handleUpdate（事件）{
event.preventDefault（）；
}
render（）{
const{name}=this.state；
如果（本道具装载）{
回装
}否则{
返回(
精神版
更新
)
}
}
}

构造函数代码可能无法正常工作：

constructor(props) {
        super(props)

        this.state = {name: this.props.spirit.name}
    }

而是检查是否有可用的props.spirit

this.state = { name: this.props.spirit && this.props.spirit.name }

添加组件WillReceiveProps：

componentWillReceiveProps(nextProps) {
  if (nextProps.spirit !== this.props.spirit) {
    this.setState({ name: nextProps.spirit.name });
  }
}

---

代码的其余部分看起来还行。

您能重新改写您的问题来解释问题发生的地方吗？e、 例如，预填充表单如何改变应用程序的运行方式？