渲染后更新 React 组件答案

【问题标题】：Update React Component after render渲染后更新 React 组件
【发布时间】：2017-12-04 12:02:08
【问题描述】：

我正在使用 react-native-sortable-listview 通过拖放更改列表项的顺序。只有拖动项目再次被渲染，所以它的位置被更新，但其他有它们以前的位置。当此组件因其他原因（如某些增量按钮）重新渲染时，所有位置都是正确的。所以我的问题是当我的 react-native-sortable-list 被渲染时，我该如何重新渲染它。 forceUpdate() 和 this.setState() 两种渲染方式，我无法遵循，因为我无法在渲染函数中更新状态。有什么方法可以做到这一点。

【问题讨论】：

嗨，分享一些代码。我想你应该能够使用renderRow 和onChangeOrder 的组合来实现这一点。
我已经用代码发布了这个question，但没有人感兴趣，所以我必须以总结形式发布它
好的，但是如果没有代码我帮不了你。至少分享一个基本的例子
先生，所以我已经发送了相同问题的链接，但如果您说我也会在这里发布代码。

标签： reactjs react-native

【解决方案1】：

尝试使用 componentWillMount 或 componentDidMount：

componentWillMount = () => {
  this.setState({
    data: myData
  });
}

基本上，在渲染组件的任何阶段，您都需要捕获该事件并调用 setState();您也可以通过按钮重新渲染。用户点击一个按钮，然后你 setState();希望这会有所帮助！

【讨论】：

这不起作用，因为 will/didMount() 只会在第一次渲染之前/之后调用一次。

【解决方案2】：

我不知道该列表，但应该有一些属性，如onDrop 或类似的东西。您可以将一个函数传递给此事件处理程序，该函数可能开始对列表进行排序，您正在传入。

是这个列表吗？

https://www.npmjs.com/package/react-native-sortable-list

我会尝试onReleaseRow 事件处理程序的作用。可能是这样的：

<SortableList onReleaseRow{() => this.sortList() data={this.state.data}}/>

sortList() {
let sortedData = //sort data somehow
this.setState({
    data: sortedData})
}

【讨论】：

【解决方案3】：

您可以将reRender 函数传递给您的可排序列表。 ReactNativeList 接受一个名为 onChangeOrder 的属性，每次更改行顺序时都会调用该属性。

class ParentComponent extends Component {
    reRender = () => {
      this.forceUpdate()
    }

    render() {
      return <ReactNativeList onChangeOrder={this.reRender} />
    }
}

【讨论】：

【解决方案4】：

好的，我找到了一种重新渲染的方法，如下所示。

  <SortableListView
      key={this.state.count}
      data={this.state.allObj}
      order={this.state.order}
      activeOpacity={0.5}
      onRowMoved={e => {
        this.setState({ count: this.state.count + 1 });
        this.props.arrangedMilestoneList(e);
        console.log('onRowMoved is called');
      }}
      onMoveEnd={() => console.log('onMoveEnd is fired')}
      renderRow={(row, s1, i) => this.renderOneDraggableMilestone(row, s1, i)}
    />

我正在做的是向SortableListView 添加一个键属性，并在每个onRowMoved 操作上更新此键。正因为如此，它会导致重新渲染。

【讨论】：