Question

我有一个组件，简化后如下：

import Sortable from 'react-sortablejs';

class App extends Component {

  constructor(props) {
    super(props);
  }

  updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

  render() {
    <Sortable
      tag='ul'
      className='item-list list-group'
      onChange={ this.updateItemOrder() }>
        { this.renderItems() }
    </Sortable>
  }
}

我的控制台列出了页面加载时的item._id和index，但是当我将项目拖放到可排序列表中时没有任何反应。更改为<ReactSortable>组件也没有帮助（根据docs）。

Answer 1

从上面的代码中特别指出这部分，

updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

看起来你正试图改变道具，这是一种无法反应的道具。要使反应中的重新渲染，您需要更新状态并告诉反应此更改是状态应该导致重新渲染。这是使用setState完成的。蝙蝠有两种选择。首先，您可以在此组件的本地状态中捕获道具并更新它，或者您可以在父组件中调用方法以更新其状态，从而强制它重新呈现。

Meteor：sortablejs方法没有被调用

1 个答案: