javascript - ReactiveVar 不重新渲染 React 组件

Question

我对 Meteor 中的 React 还很陌生。

TL;DR:在我的数据容器中，更改 ReactiveVar 的值不会重新呈现我的 View 。

我有这个代码:

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';

// Mail composer - interface for generating enews
class MailComposer extends Component {
  constructor(props) {
    super(props);
  }

  handleSubmit( event ) {
    event.preventDefault();

    const text = this.refs.mailText.value.trim(),
          title = this.refs.mailTitle.value.trim(),
          rcpts = this.refs.mailRecpts.value.trim();

    console.log(text, title, rcpts);

    if ( text && title && rcpts ) {
      // ...
      this.props.hasTestedIt.set( true );
    } else {
      // ...
    }
  }

  componentDidMount () {
    console.log(this);
    $( this.refs.textArea ).autosize();
  }

  getBtnText () {
    return ( this.props.hasTestedIt.get() ? "Send it" : "Test it" );
  }

  render() {
    let self = this;
    Tracker.autorun(function(){
      console.log(self.props.hasTestedIt.get());
    });

    return (
      <div className="panel panel-default panel-primary">
        <div className="panel-heading">
          <h3 className="panel-title">Mail composer</h3>
        </div>
        <div className="panel-body">
          <form className="form-group" onSubmit={this.handleSubmit.bind(this)}>
            <div className="input-group">
              <span className="input-group-addon" id="basic-addon1">Title</span>
              <input type="text" className="form-control" ref="mailTitle" />
            </div>
            <br/>
            <label htmlFor="js-recipients">Recipients:</label>
            <select className="form-control" width="width: initial;" id="js-recipients" ref="mailRecpts">
              <option>Admins</option>
              <option>All</option>
            </select>
            <br/>
            <label htmlFor="comment">Text:</label>
            <textarea className="form-control" rows="5" ref="mailText"></textarea>
            <br/>
            <button className="btn btn-primary" type="submit">
              {this.getBtnText()}
            </button>
          </form>
        </div>
      </div>
    );
  }
}

MailComposer.propTypes = {
  hasTestedIt: PropTypes.object.isRequired
};

export default createContainer( () => {
  return {
    hasTestedIt: new ReactiveVar( false )
  };
}, MailComposer);`

但是，当我在提交处理程序中设置 ReactiveVar 属性时，按钮中的 getBtnText 方法返回的文本不会更改。我尝试将三元直接放入 HTML 中，但得到了相同的结果。var 已正确设置为 true，因为自动运行正确地记录了更改。

在复制了该组件的另一个组件中，我确实正确地重新渲染了该组件，但在 find 上使用 .fetch() 来映射返回的renderTasks 方法中的数组，用于呈现新组件的列表。

请问我缺少什么？我该如何解决它？

非常感谢!

Answer 1

组件不会更新，因为传递的 hasTestedIt 属性本身没有更改。改变的是它所持有的值(value)。

关注您真正感兴趣的值。

// Declare the reactive source somewhere appropriately.
const hasTestedIt = new ReactiveVar( false );

// Watch its value instead.
export default createContainer( () => {
  return {
    hasTestedIt: hasTestedIt.get()
  };
}, MailComposer);`

请注意，现在它是传递给 MailComposer 的值，而不是可以引用来更新值的 ReactiveVar。在这种情况下我们如何更新它？

一种最简单的方法是像以前一样通过 hasTestedIt，尽管这不是我个人的建议。

// Watch its value instead.
export default createContainer( () => {
  return {
    // Reactive source that triggers re-rendering.
    valueOfHasTestedIt: hasTestedIt.get(),
    // Provided for the contained component to reference to set new values.
    // Leaving this alone doesn't trigger re-rendering!
    hasTested
  };
}, MailComposer);

在我看来，这并不优雅。另一种方法是将回调函数传递给 MailComposer，该函数可用于更新值。

const updateHasTestedIt = ( value ) => hasTestedIt.set( value );

// Watch its value instead.
export default createContainer( () => {
  return {
    hasTestedIt: hasTestedIt.get(),
    updateHasTestedIt,
  };
}, MailComposer);

class MailComposer extends Component {
  ...
  handleSubmit( event ) {
    ...
    this.props.updateHasTestedIt( true );
    ...
  }
  ...
};

这次好多了。

可以开发更多，但这实际上取决于您对应用程序的偏好。您且只有您可以做出设计决策。