不呈现嵌套组件排序列表的Asc/Desc排序ReactJS
项目概览
我目前正在学习ReactJS，并正在创建一个Pokedex应用程序，允许用户根据特定属性(名称、类型、hp等)对口袋妖怪对象进行排序。最终产品应该有一个搜索输入，以便按口袋妖怪名称过滤，一个下拉选择器用于排序条件，按钮用于排序升级和排序下降。正在跟踪的状态是searchQuery、sortBy、sortSelected和pokeData(我的数据文件)。
完整的代码可以在这里查看：https://github.com/julianne-vela/Pokedex-React/tree/dev
文件结构： SearchPage.js > SideBar.js > SortMenu.js
问题
onClick按钮在SortMenu中没有呈现排序的口袋妖怪列表。
预期结果：单击SortMenu -> Pokemon列表中的Asc/Desc按钮，根据下拉选择的条件按排序顺序呈现，然后单击Asc/Desc按钮。
实际结果：下拉是使用正确的排序条件更新状态，但单击按钮时不会触发任何操作。
我试过的
在整个项目中使用非结构化道具
const {
sortBy,
sortSelected,
} = this.state当前将下列道具从SearchPage.js传递给子SideBar.js：
sortByValues={sortBy} // Array of sort criteria options stored in state
sortSelected={sortSelected} // Currently selected sort criteria from drop-down
handleSortSelected={this.handleSortSelected} // event handler to update state with currently selected sort criteria
sortAsc={this.sortAsc} // function to trigger Asc sort onClick
sortDesc={this.sortDesc} // function to trigger Asc sort onClickSortMenu.js码
import React, { Component } from 'react';
export default class SortMenu extends Component {
render() {
const {
sortByValues,
handleSortSelected,
sortAsc,
sortDesc,
} = this.props
const options = sortByValues.map(option => <option value={option} key={option}>{option}</option>)
return (
<aside>
{/* DropDown Sort By */}
<select className='dropdown'
onChange={handleSortSelected}>
{options}
</select>
{/* Sort Ascending/Descending Buttons */}
<button className='sortBtn' value='ascending' onClick={sortAsc}>Ascending</button>
<button className='sortBtn' value='descending' onClick={sortDesc}>Descending</button>
</aside >
)
}
}我认为需要注意的是，我们使用的是严格的类组件，因此在这个项目中不使用构造函数(Props)。相反，我在需要时使用箭头函数隐式绑定。
来重申我的目标：，我需要根据下拉列表中选择的排序条件以及单击的“上升/下降”按钮动态地呈现口袋妖怪列表。列表应该更新onClick。
我已经做了3天的工作，并且经历了太多的排序函数迭代，以至于我甚至无法直接看到。我认为这可能是一个简单的疏忽，因为我正在编写大量的代码，以及这是一种新的语言(我已经精通Vanilla JS)。
这里的任何指导都是非常感谢的，因为我现在真的处于困境中。我不知道还能尝试什么来呈现排序列表。
更新
另外，如果我为Asc/Desc创建一个切换按钮而不是两个单独的按钮，会更容易吗？
谢谢!
更新2
目前，我正在SearchPage.js组件中调用的模块组件中呈现口袋妖怪对象。下面是口袋妖怪列表的代码：
export default class PokemonList extends Component {
render() {
const { filteredPokemon } = this.props
return (
<content className='pokemon-list float'>
{filteredPokemon.map(pokeObject =>
<PokeItem
key={pokeObject._id}
pokeImage={pokeObject.url_image}
pokeName={capFirstLetter(pokeObject.pokemon)}
pokeType={capFirstLetter(pokeObject.type_1)}
pokeHp={pokeObject.hp}
pokeAtt={pokeObject.attack}
pokeDef={pokeObject.defense}
/>)}
</content>
);
}
}这将从SearchPage.js上的筛选方法中提取过滤后的口袋妖怪：
const filteredList = pokeData.filter(pokeObject => {
return pokeObject['pokemon'].includes(this.state.searchQuery) || pokeObject['type_1'].includes(tFilterSelected);
});为了对项目进行排序，我使用了两个单独的箭头函数。它们位于SearchPage.js组件的第一部分(呈现和返回之外)：
sortAsc = () => {
this.setState(prevState => {
this.state.pokeData.sort((a, b) => (a[this.state.sortSelected] - b[this.state.sortSelected]))
})
}
sortDesc = () => {
this.setState(prevState => {
this.state.pokeData.sort((a, b) => (b[this.state.sortSelected] - a[this.state.sortSelected]))
})
}更新3
将项目添加到CodeSandbox中。可以在这里查看：https://codesandbox.io/s/pokedex-react-crflb
回答 1
Stack Overflow用户
发布于 2021-02-15 01:40:07
减去参数的比较器函数可以很好地对数字进行排序，但在字符串上会失败，因为它将返回NaN。
sortAsc = () => {
const { pokeData, sortSelected } = this.state
this.setState({
pokeData: [...pokeData].sort((a, b) => {
if (a[sortSelected] > b[sortSelected]) {
return 1
}
if (a[sortSelected] < b[sortSelected]) {
return -1
}
return 0
})
})
}
sortDesc = () => {
const { pokeData, sortSelected } = this.state
this.setState({
pokeData: [...pokeData].sort((a, b) => {
if (a[sortSelected] > b[sortSelected]) {
return -1
}
if (a[sortSelected] < b[sortSelected]) {
return 1
}
return 0
})
})
}https://stackoverflow.com/questions/66200417
复制相似问题
腾讯云开发者
