Question

我需要你的帮助。我正在使用useContext和useReducer挂钩创建一个应用程序，但是我遇到了问题。我有一个从数据库中获取所有笔记的功能。我在useEffect挂钩内调用了该函数：

notes: undefined

如果以这种方式调用该函数，则状态不会改变：

useEffect(() => {
  getNotes();
}, [notes])

//Or:
useEffect(() => {
  getNotes()
}, [getNotes])

但是，如果我在useEffect内引入依赖项，我的应用程序将陷入无限循环。例如：

{{1}}

如何避免无限循环？

Answer 1

您需要使用2个useEffect挂钩，一个用于获取数据，第二个进行处理：

useEffect(() => {
    getNotes();
}, []);

useEffect(() => {
  if (notes && notes.length) {
    ....setState or what else
  }
}, [notes]);

Answer 2

我的笔记状态如下：

.usser button {
  background-color: transparent;
  width: 20px;
  height: 20px;
}

.usser {
  margin-left: 5px;
  margin-bottom: 5px;
  height: 25px;
  border-bottom: 1px solid red;
  margin-top: 25px;
}

.usser a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usser div {
  float: right;
}

和我的减速器：

<div class="employee" id="employee">
  <div id="list">
    <p id="1" class="usser">
      <a>xxx</a>
      <div>
        <button></button>
        <button></button>
      </div>
    </p>

如何避免useEffect中的无限循环？

2 个答案: