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

【问题标题】：How to trigger useEffect on initialization without changing the state in React?如何在不改变 React 状态的情况下在初始化时触发 useEffect？
【发布时间】：2020-08-31 08:17:54
【问题描述】：

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

我已经尝试了所有我能想到的解决方案，但都没有成功。

sortByfName() 和 sortByName() 作为回调传递给从那里触发。

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

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

【问题讨论】：

在第一次加载时，您首先要进行排序lName 或fName
fName 我猜，但这并不重要。
然后在您的.then 中执行该排序逻辑并设置setContacts 然后

标签： reactjs use-effect use-state

【解决方案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 字段进行排序

【讨论】：

我试图将排序移动到 useEffect 之外的一个函数，并从那里以及 setContacts() 之前触发它，但我得到：“'sort' 函数使 useEffect Hook (在第 47 行）在每次渲染时更改。将其移动到 useEffect 回调中。"
您可以使用result 对象 - 这就是您的排序方式。另外，我刚刚意识到您正在通过本机 sort 函数直接改变 contacts 状态，我建议您首先克隆 contacts（例如，通过扩展语法）然后对该克隆进行排序
我明白为什么直接改变联系人是不好的，但为什么要通过传播语法呢？为什么不直接将联系人复制到一个新对象并对其进行操作？
或者等等，我真的是在变异联系人吗？我以为我只从联系人中读取值并将它们存储在排序中？
sort 直接排序并返回数组 - 它不会创建新数组，例如 map 会

【解决方案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]);

【讨论】：

我喜欢最佳实践，所以谢谢，这就是我要采用的解决方案！我是新手，真的需要学习常见的模式。

【解决方案3】：

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

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

然后在 useEffect 中添加 sort 实在是太愚蠢了，因为它是由 event 触发的，所以我只是做了一个普通的函数通过按钮传递给组件。我使用事件来获取 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

【讨论】：