使用 React + Meteor 预填充表单时的奇怪行为/加载模式

Question

悬崖：

我正在尝试从用户以前的条目中预先填写表单，这些条目都存储在 MongoDB 集合中我这样做是使用传统的 Javascript：

componentDidMount(){
 let name = document.getElementById("name");
    name.value = this.props.iData.name;
}

除非我刷新页面，否则这会正常工作，在这种情况下，我会收到 this.props.iData 未定义的错误。因此，每当我访问带有预填充数据的页面时，它都能正常工作，订阅也能正常工作。但是当我刷新同一页面时，订阅的加载速度不够快。

订阅是这样完成的：

export default createContainer(function(){
  const subHandle = Meteor.subscribe("iData", function(){
  });
  const isLoading = !subHandle.ready();
  return {
    isLoading,
    iData: Poll.find().fetch(),
  }
}, UserSettings)

我一定是做错了什么，才会以这种方式发生。

Answer 1

您是否确保在调用 componentDidMount 时您的数据已准备就绪。而且你不应该在反应中使用 document.getElementById()。

在 react 中你需要使用 refs。

class Sample extends React.Component {
  componentDidMount() {
    this.ref.input.value = 'some value';
  }
  
  render() {
    return (
      <input ref="input" />
    );
  }
}

您也可以这样做：

class Sample extends React.Component {
    render() {
        return (
          <div>
            {!this.props.isLoading ? (
             <input value = {this.props.someValue}/>
            ) : (
              <p>Loading </p>
            )}
          </div>
        );
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>