Javascript React中的更新状态：嵌套在对象中的数组元素

我正在尝试构建onChange搜索功能。在建议列表中，我的状态如下：

results: {
    page: 1,
    results: [
       {value: 'popularity.desc', label: 'Popularity Descending'},
       {value: 'popularity.asc', label: 'Popularity Ascending'},
       {value: 'new value', label: 'new label'},
       {value: 'vote_average.desc', label: 'Rating Descending'}
    ]
}

当用户选择{value:'new value'，label:'new label'}对象时

如何将对象转移到状态的结果数组的第一个索引

例如：拾取对象后。国家应该是这样的：

results: {
    page: 1,
    results: [
       {value: 'new value', label: 'new label'},
       {value: 'popularity.desc', label: 'Popularity Descending'},
       {value: 'popularity.asc', label: 'Popularity Ascending'},
       {value: 'vote_average.desc', label: 'Rating Descending'}
    ]
}

我的想法是使用扩展运算符和过滤器，但我不知道如何实现它

选择项目方法：

onSuggestionSelected = (event, {suggestion, suggestionValue }) => {

    console.log('Selected', suggestion);  // {value: 'new value', label: 'new label'}

    if (suggestion.media_type === 'movie') {
        this.navigate('/search/movie', suggestionValue, suggestion);
    } else if (suggestion.media_type === 'tv') {
        this.navigate('/search/tv', suggestionValue, suggestion);
    } else {
        this.navigate('/search', suggestionValue, suggestion);
    }
};

选中后，它将导航：

navigate = (pathname, queryValue, resultValue) => {

    // ResultValue is that Object that I want to shift first.

    this.props.history.push({ 
        pathname, 
        search: `?query=${queryValue}`, 
        state: {results: this.state.data}});
};

---

您可以找到要在数组中放在第一位的结果的索引，然后将该索引放在第一位，然后再放在数组中的结果之前和之后

范例

---

首先，我们需要使用findIndex查找索引，然后过滤当前状态以排除包含选定数据的对象

我们需要做的最后一件事是使用扩展运算符将结果合并到一个数组中

例如：

常数当前状态=[ {value:'popularity.desc'，标签：'popularity Descending'}， {value:'popularity.asc'，标签：'popularity singressing'}， {value:'new value'，label:'new label'}， {value:'vote_average.desc'，标签：'Rating Descending'} ]; const selectedValue={value:'new value'，label:'new label'}； const onSelectionChange=已选定=>{ const selectedIndex=currentState.findIndex{value}=>value==selected.value； const selectedItem=当前状态[selectedIndex]； const stateExcludedItem=currentState.filter{value}=>value！==selected.value； const newState=[selectedItem，…stateExcludedItem] //这是我的国家 返回新闻状态； } const result=onSelectionChangeselectedValue；

---

console.logresult 要将选定项移动到第一个位置，可以使用Array.filter方法将未选定项获取为数组，并构建新的结果数组：

selectedItem = this.state.results.results[clickedIndex]
unselectedItems = this.state.results.results.filter((item, index) => clickedIndex !== index)

因为状态中的结果是一个对象。要更新状态中的对象，应复制当前结果对象以创建新对象，以便更新状态

results = {...this.state.results, results: [selectedItem, ...unselectedItems]}

您只需要将所选项目移动到结果数组的顶部，因此只需将所选项目的索引转移到事件处理程序，事件处理程序将调用setState方法

示例代码：

类应用程序扩展了React.Component{ 状态={ 结果:{ 页码：1， 结果:[ {value:'popularity.desc'，标签：'popularity Descending'}， {value:'popularity.asc'，标签：'popularity singressing'}， {value:'new value'，label:'new label'}， {value:'vote_average.desc'，标签：'Rating Descending'} ] } }; handelClick=点击索引=>{ 如果单击索引===0{ 回来 } 让selectedItem=this.state.results.results[单击索引]， unselectedItems=this.state.results.results.filteritem，index=>clickedIndex！==index， 结果={…this.state.results，结果：[selectedItem，…unselectedItems]}； this.setState{results} }; 渲染{ 回来 {this.state.results.results.mapitem，索引=> {item.label} } } } const renderFilterList==>{ ReactDOM.render，document.getElementById'react-app'； };

selectedItem = this.state.results.results[clickedIndex]
unselectedItems = this.state.results.results.filter((item, index) => clickedIndex !== index)

results = {...this.state.results, results: [selectedItem, ...unselectedItems]}