内容在排序后不会改变，React。

huangapple
go评论85阅读模式
英文:

content doesn't change after sorting react

问题

我有一个小的React应用。我想要实现按不同参数排序的功能，当您选择一个sortType时，下面的内容将根据这些标准进行排序。

我创建了一个函数，应该根据sortType返回带有必要参数的数据，但它不起作用。内容没有改变。
我认为这里可能有些错误，但我没能注意到，如果有人能帮助我，我会很高兴。

英文:

I've a small React app. I want to make it possible to sort by different parameters, when you select a sortType, the content below is sorted by those criteria.

I created a function that should return data already with the necessary parameters depending on the sortType, but it doesn't work. The content doesn't change.
I think that there is some kind of mistake here and I can’t notice it, I'll be glad if someone helps me with this

  1. function MarkersPage() {
  2.   const markers = useSelector((state) => state.data.markers);
  3.   const [data, setData] = useState([...markers]);
  4.   const [sortType, setSortType] = useState(1);
  6.   const markerItem = (item) => {
  7.     return (
  8.       <div className="markers-item" key={item.id}>
  9.         <div className="top-info">
  10.           <div className="icon">
  11.             <img
  12.               src={
  13.                 item.isHome
  14.                   ? "../assets/home-marker.png"
  15.                   : "../assets/default-marker.png"
  16.               }
  17.               alt=""
  18.             />
  19.           </div>
  20.           <div className="coords">
  21.             <span>{item.coordinates[0].toFixed(5)}, </span>
  22.             <span>{item.coordinates[1].toFixed(5)}</span>
  23.           </div>
  24.           <div className="btn-block">
  25.             <button type="button" onClick={() => handleEdit(item)}>
  26.               edit
  27.             </button>
  28.             <button
  29.               type="button"
  30.               onClick={() => dispatch(deleteMarker(item.id))}
  31.             >
  32.               delete
  33.             </button>
  34.           </div>
  35.         </div>
  36.         <div className="main-info">
  37.           <div className="info">
  38.             <h6>{item.title}</h6>
  39.           </div>
  40.           {item.note ? (
  41.             <details className="note">
  42.               <summary>Note:</summary> <p>{item.note}</p>
  43.             </details>
  44.           ) : (
  45.             ""
  46.           )}
  47.         </div>
  48.         <div className="bottom-info">
  49.           <p className="postcode">{item.postcode}</p>
  50.           <p className="country">{item.country}</p>
  51.         </div>
  52.       </div>
  53.     );
  54.   };
  56.   const dataChanges = () => {
  57.     if (sortType === 1) {
  58.       console.log(1);
  59.       return data.map((item) => {
  60.         return markerItem(item);
  61.       });
  62.     }  
  63.     if (sortType === 2) {
  64.       console.log(2);
  65.       return data.map((item) => {
  66.         return markerItem(item);
  67.       });
  68.     } 
  69.     if (sortType === 3) {
  70.       console.log(3);
  71.     return data
  72.         .sort((a, b) => a.date - b.date)
  73.         .map((item) => {
  74.           return markerItem(item);
  75.         });
  76.     }
  77.     if (sortType === 4) {
  78.       console.log(4);
  79.       return data
  80.         .sort((a, b) => b.date - a.date)
  81.         .map((item) => {
  82.           return markerItem(item);
  83.         });
  84.     }
  85.   };
  88.   return (
  89.     <div className="markerspage">
  90.       <div className="container">
  91.         <div
  92.           className="markerspage-inner"
  93.           style={editMode ? { filter: "blur(10px)" } : {}}
  94.         >
  95.           <div className="sort-bar">
  96.             <select
  97.               defaultValue={1}
  98.               onChange={(event) => setSortType(event.target.value)}
  99.             >
  100.               <option value="1">All</option>
  101.               <option value="2">Home</option>
  102.               <option value="3">Date ↑</option>
  103.               <option value="4">Date ↓</option>
  104.             </select>
  105.           </div>
  106.           <div>
  107.             {!markers ? (
  108.               <div>No places</div>
  109.             ) : (
  110.               <div className="markers-items">{dataChanges()}</div>
  111.             )}
  112.           </div>
  113.         </div>
  114.       </div>
  115.     </div>
  116.   );
  117. }
  119. export default MarkersPage;

答案1

得分: 1

你需要在你的 dataChanges 中调用 setData(data…)，而不是 return data…。

此外，我建议你使用 Redux Toolkit 中的 createSelector，这样你可以像这样做：

  1. const sortedData = useSelector((state) => sortedDataSelector(state, sortType))
  1. const sortedDataSelector = createSelector(
  2.   (state, sortType) => state.data.markers,
  3.   (state, sortType) => sortType,   
  4.   (markers, sortType) => { 
  5.     if (sortType === 1)
  6.       return markers.sort(…)
  7.   } 
  8.   …
  9. )

Selectors 有点棘手，你可以从这里开始学习：https://redux.js.org/usage/deriving-data-selectors#createselector-overview

英文:

You have to call setData(data…) instead of return data… inside your dataChanges

however I can recommend using createSelector from redux toolkit so then you can do something like that:

  1. const sortedData = useSelector((state) => sortedDataSelector(state, sortType) 
  1. const sortedDataSelector = createSelector(
  2.   (state, sortType) => state.data.markers,
  3.   (state, sortType) => sortType,   
  4.   (markers, sortType) => { 
  5.   if (sortType === 1)
  6.     return markers.sort(…)
  7.   } 
  8.   …
  9. )

Selectors are a bit tricky you can start from here https://redux.js.org/usage/deriving-data-selectors#createselector-overview

huangapple
  • 本文由 发表于 2023年5月7日 18:03:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76193230.html
  • javascript
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定