流星:不被调用的排序方法

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>组件也没有帮助(按照文档)。

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 } });
    });
  };

这似乎是你试图改变道具，这是一个拒绝的反应。若要导致重新呈现，您需要更新状态并告诉react此更改是状态应该导致重新呈现。这是使用setState完成的。有两个选择，出现在脑海中的蝙蝠的权利。首先，您可以在这个组件的本地状态捕获您的道具并更新它，或者您可以在父组件中调用一个方法来更新它的状态，迫使它重新呈现。