排序后 React 中的状态没有更新? [英] State is not updating in React after sorting?

问题描述

我正在尝试按日期和数字对 JSON 对象进行排序.当我控制台日志时一切正常，但状态没有在 GUI 端更新.我错过了什么?我正在使用功能组件.这是代码...

const Posts = () =>{const [dummyData, setDummyData] = useState(Data);const sortList = (e) =>{如果(e.target.value ===日期"){处理排序()；} else if (e.target.value === "upvotes") {byUpvotes();}};const handleSort = () =>{const sortedData = dummyData.sort((a, b) => {const c = 新日期(a.published);const d = 新日期(b.published);如果 (c.getDate() > d.getDate()) {返回 c;} 别的 {返回d；}});setDummyData(sortedData);控制台日志(排序数据)；};const byUpvotes = () =>{const sortByName = dummyData.sort((a, b) => {返回 b.upvotes - a.upvotes;});setDummyData(sortByName);控制台日志(sortByName)；};返回 (<div>{dummyData.map((post) => (<PostsItem key={post.id} post={post}/>))}<div className="row"><div className="col-s6"><label>浏览器选择</label><select className="browser-default";onChange={sortList}><选项禁用选择>选择您的选项</选项><选项值=日期">日期</option><option value="upvotes">Upvotes</option></选择>

);};

解决方案

sort 函数不会创建新数组，它会改变旧数组.因此，您正在重新排列现有状态，然后使用相同的数组设置状态.由于是同一个数组，react 认为状态没有改变，跳过渲染.

相反，您需要制作数组的副本，然后对其进行排序.例如:

const byUpvotes = () =>{const sortByName = [...dummyData];sortByName.sort((a, b) => {返回 b.upvotes - a.upvotes})setDummyData(sortByName)}

I am trying to sort JSON object by date and number. Everything is working fine when i console log but the state is not getting updated on the GUI side. What am i missing? I am using the functional components. Here is the code...

const Posts = () => {
  const [dummyData, setDummyData] = useState(Data);
  const sortList = (e) => {
    if (e.target.value === "date") {
      handleSort();
    } else if (e.target.value === "upvotes") {
      byUpvotes();
    }
  };
  const handleSort = () => {
    const sortedData = dummyData.sort((a, b) => {
      const c = new Date(a.published);
      const d = new Date(b.published);
      if (c.getDate() > d.getDate()) {
        return c;
      } else {
        return d;
      }
    });
    setDummyData(sortedData);
    console.log(sortedData);
  };

  const byUpvotes = () => {
    const sortByName = dummyData.sort((a, b) => {
      return b.upvotes - a.upvotes;
    });
    setDummyData(sortByName);
    console.log(sortByName);
  };
  return (
    <div>
      {dummyData.map((post) => (
        <PostsItem key={post.id} post={post} />
      ))}

      <div className="row">
        <div className="col-s6">
          <label>Browser Select</label>
          <select className="browser-default" onChange={sortList}>
            <option disabled selected>
              Choose your option
            </option>
            <option value="date">Date</option>
            <option value="upvotes">Upvotes</option>
          </select>
        </div>
      </div>
    </div>
  );
};

解决方案

The sort function does not create a new array, it mutates the old one. So you're rearranging the existing state, and then setting state with the same array. Since it's the same array, react thinks the state hasn't changed and skips rendering.

Instead, you will need to make a copy of the array and then sort that. For example:

const byUpvotes = () => {
  const sortByName = [...dummyData];
  sortByName.sort((a, b) => {
    return b.upvotes - a.upvotes
  })
  setDummyData(sortByName)
}

这篇关于排序后 React 中的状态没有更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！