如何在不更改 React 状态的情况下在初始化时触发 useEffect？

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 状态 on-component-mount 之前执行排序逻辑。请参阅我对 .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 调用，这很常见 best-practice：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

感谢您提供的所有出色解决方案，但我最终采用了另一种对我来说更好的方法。

首先，我在数据库调用中进行了初始排序。 Best-practise:-)

那么在 useEffect 中使用 sort 是愚蠢的，因为它是由 event，所以我只是做了一个普通的函数来传递给带有按钮的组件。我用这个事件得到了 sortBy-parameter.

function App() {
  const [contacts, setContacts] = useState([]);

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

  // SORT CONTACTS
  const sort = (event) => {
    event.preventDefault();
    const sortBy = event.target.getAttribute('name');
    const sortContacts = [...contacts];
    sortContacts.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(sortContacts);
  };

// And so on

如何在不更改 React 状态的情况下在初始化时触发 useEffect？

How to trigger useEffect on initialization without changing the state in React?

reactjs

use-effect

use-state