2

我有一个使用react-dnd. 有两列，从右侧列拖到左侧激活特定状态项。

在放置时，pushCard()它被调用，它（顾名思义）将拖动的项目推入激活状态数组，即status_data.

但问题是，status_data.push(itemToPush)将新项目推到数组的末尾。我想将项目推到数组的顶部，即数组的索引 0。

status_data.unshift(itemToPush)在这种情况下有效，但unshift只更新后端中的数组state，但不显示array前端的更新。相反，它只会继续推动首先被拖动的相同元素。

GIF 中问题的简单描述。

pushCard：

pushCard(item) {
    const { status_data } = this.state.template;
    const itemToPush = {
        title : item.title || 'CUSTOM',
        type_id : item.type_id,
        color : item.color || '#000',
        type: item.type,
        require_notes: item.require_notes || false,
        require_estimate: item.require_estimate || false
    };
    status_data.unshift(itemToPush);
    this.setState(Object.assign(this.state.template, { status_data }));
}

renderActiveStatuses

renderActiveStatuses() {
    let renderedResult = '';
    if (this.state.template.status_data.length < 0) {
      renderedResult = (<p>No status active in this template.</p>);
    } else {
      renderedResult = this.state.template.status_data.map((status, i) => {
        return (
          <Status deleteStatus={this.deleteStatus} handleStatusUpdate={this.onStatusUpdate} index={i} id={status.id} moveCard={this.moveCard} statusData={status} key={status.id} />
        );
      });
    }
    return renderedResult;
}

renderActiveStatusesrender在组件的函数中调用。

4

2 回答 2

4

像您在此处显示的status对象一样itemToPush，没有 property id，您将其用作keyin Status。您可以改为尝试key={i}（即使使用地图索引不是最好的主意）。

您可以像这样生成（可能）唯一 ID：

const itemToPush = {
    id: Math.random().toString(36).substr(2, 16), 
    ...
}

status.id现在像以前一样使用。

如果在生成数百万个 ID 的情况下存在任何风险，则有更好的 ID 生成器。

于 2017-10-20T11:37:16.033 回答
1

那这个呢？

this.setState({template: Object.assign({}, this.state.template, { status_data })});

正如您在问题中所做的那样，您只是将 的内容分配给您的状态this.state.template，而原始内容永远不会改变，因此您的状态变为

state = {
    template: {status_data: ...},
    status_data: ...,
    ...
}
于 2017-10-20T11:09:47.000 回答