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

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

我已经尝试了我能想到的每一个解决办法，但没有成功

SortByName（）和SortByName（）作为回调传递给to触发器

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

函数应用程序（）{
const[contacts，setContacts]=useState（[]）；
const[sortBy，setSortBy]=useState（'lName'）；
//从服务器获取数据
useffect（（）=>{
axios
.get（'http://localhost:5000/')
。然后（（结果）=>{
设置联系人（结果数据）；
})
.catch（（err）=>console.log（err））；
}, []);
//分类联系人
useffect（（）=>{
常数排序=联系人。排序（（a，b）=>{
设nameA=a[sortBy].toUpperCase（）；
设nameB=b[sortBy].toUpperCase（）；
如果（nameAnameB）返回1；
返回0；
});
设置联系人（已排序）；
}，[sortBy，contacts]）；
const sortByfName=（）=>setSortBy（'lName'）；
const sortBylName=（）=>setSortBy（'fName'）；
…再添加几个函数，然后呈现JSX

我建议您在设置组件安装上的

联系人

状态之前执行排序逻辑。请参阅我对

的评论。然后

回调

// 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字段进行排序

首先，最好将排序参数传递给API调用，这是常见的最佳实践：

http://localhost:5000/?sort=fName

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

//从服务器获取数据
useffect（（）=>{
axios
.get（'http://localhost:5000/')
。然后（（结果）=>{
const sortedData=排序器（result.data，sortBy）；
设置联系人（数据）；
})
.catch（（err）=>console.log（err））；
}, []);

及

---

谢谢你们所有伟大的解决方案，但我最终选择了另一种对我来说更好的方法

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

然后，在useEffect中使用排序是愚蠢的，因为它是由事件触发的，所以我只做了一个正常的函数，用按钮传递给组件。我使用事件来获取sortBy参数

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

函数应用程序（）{
const[contacts，setContacts]=useState（[]）；
//从服务器获取数据
useffect（（）=>{
axios
.get（'http://localhost:5000/')
。然后（（结果）=>{
设置联系人（结果数据）；
})
.catch（（err）=>console.log（err））；
}, []);
//分类联系人
常量排序=（事件）=>{
event.preventDefault（）；
const sortBy=event.target.getAttribute（'name'）；
const sortContacts=[…联系人]；
sortContacts.sort（（a，b）=>{
设nameA=a[sortBy].toUpperCase（）；
设nameB=b[sortBy].toUpperCase（）；
如果（nameAnameB）返回1；
返回0；
});
设置触点（sortContacts）；
};
//等等

在第一次加载时，我想您首先需要的排序是

lName

还是

fName

fName，但这并不重要。然后在

中执行排序逻辑并设置
setContacts
，然后我尝试将排序移到useffect之外的函数，并从那里以及setContacts之前触发它（），但我得到：“sort”函数使useffect钩子的依赖项（在第47行）在每次渲染时都发生更改。将其移动到useffect回调中。”您可以使用
结果
对象-这就是您排序的内容。此外，我刚刚意识到您正在通过本机函数直接变异
联系人
状态，我建议您首先克隆
联系人
（例如，通过扩展语法）然后排序，cloneI可以看到为什么直接变异联系人不好，但为什么通过扩展语法？为什么不只是将联系人复制到一个新对象并对其执行操作？或者等等，我真的在变异联系人吗？我想我只读取联系人的值并将其存储在排序中？直接排序并返回数组-它不会创建一个新阵列，例如，doesI喜欢最佳实践，所以谢谢你，这是我将使用的解决方案！我对这方面还不熟悉，真的需要学习常见模式。
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]);

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