React的useState不重新渲染

Question

我有一个相当简单的useEffect钩子

const [tagsWithData, setTagsWithData] = useState([]);
useEffect(() => {
    ....
    const finalsTags = temp.map((item) => item.name);
    setTagsWithData(finalsTags);
 }, []);

在return语句中，我有一个条件来渲染输入标签。

{tagsWithData.length !== 0 ? (
    <TagsInput
        selectedTags={selectedTags}
        tags={tagsWithData}
     />
      ) : (
      <TagsInput
     selectedTags={selectedTags}
     tags={tags}
     />
 )}

上面的代码始终停留在0，不会跳转到else条件。

我在这里做错了什么。

谢谢你

- Deepa

Answer 1

您的 useEffect 没有被告知更新。需要向 useEffect 传递值/依赖项，以便在其上触发更新。否则，该效果仅在组件初始渲染时运行一次。

const [tagsWithData, setTagsWithData] = useState([]);
useEffect(() => {
    ....
    const finalsTags = temp.map((item) => item.name);
    setTagsWithData(finalsTags);
 }, [temp]);  // <--- add this

以下是一个小例子，展示它们之间的区别。点击按钮，查看 effectWithDep 和 effectWithoutDep 的输出。你会注意到只有 effectWithDep 会更新。

// Get a hook function
const { useState, useEffect } = React;

const Example = ({title}) => {
  const [count, setCount] = useState(0);
  
  const [effectWithDep, setEffectWithDep] = useState(0); 
  const [effectWithoutDep, setEffectWithoutDep] = useState(0);
  
  useEffect(() => {
     setEffectWithDep(count)
  }, [count])
  
  useEffect(() => {
     setEffectWithoutDep(count)
  }, [])

  return (
    <div>
      <p>{title}</p>
      
      <p>effectWithDep: {effectWithDep}</p>
      
      <p>effectWithoutDep: {effectWithoutDep}</p>
      
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

- Rohan Büchner

---

我得到了“finalsTags未定义”的错误，no-undef。 - Deepa

@DeepakMurthy，我看到你编辑了你的示例。这确实改变了上下文。你不能在钩子内部声明最终数据，并将其作为“依赖项”传递。在你更新的示例中，“temp”将是“依赖项”。我会更新我的答案来反映这一点。 - Rohan Büchner

我创建了一个沙盒：https://codesandbox.io/s/beautiful-lichterman-gxdmu - Deepa

@DeepakMurthy 您的示例看起来很好。我使用另一个模拟API进行了测试，useEffect钩子也可以正常工作。我感觉可能存在一些其他通用代码/逻辑问题，而且我很难跟上您在代码中期望的确切流程。然而，原始问题没有任何问题，我建议您在确切知道需要解决什么问题后再提出新问题。（这个问题有点失控/离题:P） - Rohan Büchner

让我们在聊天中继续这个讨论。 - Rohan Büchner