单击时按值分类React Dynamic List

Question

我正在尝试通过等级，下降，在渲染之前对此数组（参与者）进行排序，但是在添加值覆盖数组中的“以下对象”的问题。

这是一个示例数组，也是我正在使用的代码的一部分，其后是我收到的输出示例。

const participants= [
    {rank: 15, name: 'Alex'},
    {rank: 5, name: 'Eric'},
    {rank: 16, name: 'Jon'},
    {rank: 20, name: 'Zach'},
]

renderRows() {
    var context = this;

    const sortedParticipants = [...this.state.participants].sort((a, b) => b.rank - a.rank);
    console.log(sortedParticipants); //confirms sortedParticipants is sorted

    // return  [...this.state.participants].sort((a, b) => b.rank - a.rank).map(function(o, i) { //ALTERNATE RETURN
    return  this.state.participants.map(function(o, i) {
    /* using this.state.sortedParticipants results in a blank screen */
        return (               
            <tr key={'participants-' + i}>
                <td>
                    <input
                        id='rank'
                        type='text'
                        value={o.rank}
                        onChange={context.handleParticipantChanged.bind(context, i)}
                    />
                </td>
                <td>
                    <input
                        id='name'
                        type='text'
                        value={o.name}
                        onChange={context.handleParticipantChanged.bind(context, i)}
                    />
                </td>                                     
                <td> 
                    <button onClick={context.handleParticipantDeleted.bind(context, i)}> 
                        Delete 
                    </button>
                </td>                    
            </tr>
        );
    });
}

当我运行它时，根据需要将 console.log 确认 sortedparticipant 进行排序，但使用 return this.state.state.state.state.sortedparticipants.map（function（o，i） {给出一个空白屏幕。 如果我使用替代返回运行几乎可以工作，但是如果更改了任何变量，它将旧值推到下一个相应的密钥。例如，数组中的前三个对象将输出；

0: Object { rank: "16", name: "Jon" }​
1: Object { rank: "15", name: "Alex" }​
2: Object { rank: "5", name: "Eric" }

但是，如果您尝试将第一个对象更改为 20，Zach 在表输入中，对象0覆盖对象1。

0: "Zach"​
1: Object { rank: "16", name: "Jon" }​
2: Object { rank: "5", name: "Eric" }

此外，如果您尝试输入 15，Alex 又回到对象1，当前数据覆盖下一个对象。

0: "Zach"​
1: "Alex"​
2: Object { rank: "16", name: "Jon" }

最后，如果我们输入第五参与者（ 18，jeff ），则会发生这种情况；

0: "Zach"​
1: "Alex"​
2: Object { rank: "18", name: "Jeff" }​
3: Object { rank: "16", name: "Jon" }

我不明白为什么会发生这种情况，也无法找到任何有帮助的文献。事先感谢您提供的任何建议！

编辑： 这是 handle -participantchanged ;

handleParticipantChanged(i, event) {        
        var participants = this.state.participants;
        participants[i] = event.target.value;
        this.setState({
            participants: participants
        });
    }

Answer 1

sortedparticipant

解决问题的第一部分， sortedParticipant 看起来正确 this.state.state.sortedparticipants 没有，因为您没有存储输出 .sort 方法中的该状态值。要么将其存储在此处，或者最好是在没有 this.State的变量名称中。前缀。

const sortedParticipants = [...this.state.participants].sort((a, b) => b.rank - a.rank);
console.log(sortedParticipants); //confirms sortedParticipants is sorted

以上是有道理的，因为您正在记录由此产生的分类参与者数组。

return  this.state.participants.map(function(o, i) {
/* using this.state.sortedParticipants results in a blank screen */

您在此处获得空白屏幕，因为您从未将 sortedParticipants 数组存储到 this.state 对象中。它仅作为局部变量存在，因此您可以将其引用为 sortedParticipant 而不是 this.state.sortedParticipants （或将结果存储在状态下，但这不会在这里有意义）。

handerparticipantchanged

您正在看到该值仅由名称代替，因为您将整个值设置为新字符串，而不仅仅是名称属性。

请注意，...

participants[0] = "hello";
// [ "hello", { rank: 10, name: "Jesse" }, { rank: 11, name: "Emily" } ]

和此...

participants[0].name = "hello";
// [ { rank: 9, name: "hello" }, { rank: 10, name: "Jesse" }, ... ]

您想在该索引上替换参与者的属性 name 属性，而不是该索引处的整个值。这是一个非常简单的修复：

// change this
participants[i] = event.target.value;

// to this
participants[i].name = event.target.value;