reactjs - react useState 不重新渲染

Question

我有一个非常简单的 useEffect 钩子(Hook)

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

在返回内部，我有条件渲染输入标签

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

上面的代码一直停留在0，并没有移动到else条件。

我在这里做错了什么。

谢谢

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>