React Hooks 状态没有更新为正确的输出

Question

我正在使用 React Hooks。我正在尝试对从 API 获取的数据进行排序，并使用新排序的数据更新状态。

const [runs, setRuns] = useState({
    runs: [],
  });
const [altConcentrationRuns, setAltConcentrationRuns ] = useState({
    altConcentrationRuns : []
  })

async function handleRuns() {
    getRuns().then((result) => {
    
      setRuns(result.rows);
      setFilteredRuns(result.rows);

      //function to sort data according to column header/property
      
      const sortRowsByProperty = (property, direction) => {
        return result.rows.sort(function(a,b) { 
          var A = Object.keys(a)[0];
          var B = Object.keys(b)[0];
          if(direction == "ascending") {
                return (a[A][property] - b[B][property]);
              } else if(direction == "descending") {
                return b[B][property] - a[A][property];
              }
          });
        } 
        setAltConcentrationRuns(sortRowsByProperty('altConcentration', 'ascending'));
        //not updating, only showing runs 

      
      setIsLoading(false);
      
      
    });
  }

  useEffect(() => {
    setIsLoading(true);
    handleRuns();
    
  }, []);
  console.log('runs', altConcentrationRuns);

当我控制台记录我的输出时，我没有得到排序的数据，只有原始数据 (result.rows)。我做错了什么？

谢谢！

Answer 1

我在您的代码中发现了一个问题。你以错误的方式初始化你的状态。

const [runs, setRuns] = useState([]);
const [altConcentrationRuns, setAltConcentrationRuns ] = useState([])

这就是你的状态应该被初始化的方式。 useState的文档

Answer 2

问题在于您的排序功能。在 JS 中对项目进行排序，通常的做法是在 a < b 时返回 -1，在 a == b 时返回 0，在 a > b 时返回 1。您通常可以省略== 条件，只返回-1 或1

if (direction === "ascending") {
   return a[A][property] < b[B][property] ? -1 : 1
} else if (direction === "descending") {
   return a[A][property] < b[B][property] ? 1 : -1
}

这可以进一步优化，但为了便于理解，请保持与您的代码相似。