Question

我想获取一个数据列表，并在页面首次加载时对其进行排序，然后我希望能够按（fName）或（lName）进行排序。排序在我触发状态更改时起作用，但在初始加载时不起作用，它以数据库提供给我的顺序显示，我想在加载数据后立即触发排序。

我尝试了所有可以想到的解决方案，但没有成功。

sortByfName（）和sortBylName（）作为回调传递给，从那里触发。

由于某种原因，排序向后进行，这就是为什么我传递相反的值，但这是另一个怪癖，我稍后会进行整理：-）

function App() {
  const [contacts, setContacts] = useState([]);
  const [sortBy, setSortBy] = useState('lName');

  // GET DATA FROM SERVER
  useEffect(() => {
    axios
      .get('http://localhost:5000/')
      .then((result) => {
        setContacts(result.data);
      })
      .catch((err) => console.log(err));
  }, []);

  // SORT CONTACTS
  useEffect(() => {
    const sorted = contacts.sort((a, b) => {
      let nameA = a[sortBy].toUpperCase();
      let nameB = b[sortBy].toUpperCase();
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    });
    setContacts(sorted);
  }, [sortBy, contacts]);

  const sortByfName = () => setSortBy('lName');

  const sortBylName = () => setSortBy('fName');

... A few more functions and then render the JSX

Answer 1

我建议您在将contacts状态设置为组件安装之前执行排序逻辑。查看我对.then回调的评论

// GET DATA FROM SERVER
useEffect(() => {
  axios
    .get('http://localhost:5000/')
    .then((result) => {
      // perform sorting logic here before setting contacts

      setContacts(result.data);
    })
    .catch((err) => console.log(err));
}, []);

除此之外，我想您可以在返回结果之前重构API以根据X字段进行排序

Answer 2

首先，最好将排序参数传递给API调用，这是常见且最佳实践：http://localhost:5000/?sort=fName

但是，如果不可能，则必须在获取响应后立即对数据进行排序。

// GET DATA FROM SERVER
  useEffect(() => {
    axios
      .get('http://localhost:5000/')
      .then((result) => {
        const sortedData = sortHandler(result.data, sortBy);
        setContacts(sortedData);
      })
      .catch((err) => console.log(err));
  }, []);

和

const sortHandler = (data, sortBy) => {
   return data.sort((a, b) => {
      let nameA = a[sortBy].toUpperCase();
      let nameB = b[sortBy].toUpperCase();
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    });
}

进一步根据状态变化进行排序

// SORT CONTACTS
  useEffect(() => {
    const sorted = sortHandler(contacts, sortBy);
    setContacts(sorted);
  }, [sortBy, contacts]);

Answer 3

感谢您提供的所有出色解决方案，但最后我想到了另一种对我来说似乎更好的方法。

首先，我在数据库调用中进行了初始排序。最佳实践：-）

然后在 useEffect 中包含 sort 只是愚蠢的，因为它是由 event 触发的，所以我只是做了一个普通的函数通过按钮传递给组件。我使用该事件来获取sortBy参数。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let text = "This is your text"
    let size = text.size(withAttributes:[.font: UIFont.systemFont(ofSize:18.0)])
    return CGSize(width: size.width + 10.0, height: 44.0)
    
}

如何在初始化时触发useEffect而不更改React中的状态？

3 个答案: