使用 boolean 属性初始化“useState”挂钩，但 state 未定义 - React

Question

所以我发送一个 object 的 sippet 字段 'followed' 作为一个组件的 prop 到这个代码（简化）：

export const SippetDisplayHeader = ({ sippet, toastAuthor = null }) => {

  const [followed, setFollowed] = useState(sippet.followed)
  console.log(followed)
  console.log(sippet.followed)
  
  useEffect(() => {
    setFollowed(sippet.followed)
  }, [sippet.followed])

  return (...
  )
}

现在，我确保它在被传递给这个组件之前就在那里，并且 sippet.followed 日志正确，但仍然是后续的 state 日志和初始化为未定义。 为什么？ sippet.followed 是 boolean，在本例中为真。

如您所见，我尝试使用 useEffect 来解决这个问题，它确实有效，但有点搞乱了组件的初始样式。

父组件的返回（所述组件是 sippetDisplayHeader，第 5 行）：

return (
   sippet ?
    <article className='p-2 flex flex-col border-t border-t-black bg-transparent'>
      <section className='w-full flex flex-col'>
        <SippetDisplayHeader i={i} sippet={sippet} toastAuthor={sippet.is == 'toast' && sippet.ref_sippet.author} />
        <article onWheel={handleWheel} className={`container flex w-full justify-center flex-col items-center p-1 bg-neutral800 ${sippet.is == 'toast' ? 'border-t-2 border-l-2 border-neutral-800 hover:shadow shadow-black duration-300' : ''}`}>
          {code.blocks && code.blocks.map((block, i) => (
            block.type === 'text' ?
            <TextareaAutosize
              key={i}
              readOnly={true}
              value={block.value}
              className='w-full resize-none caret-white bg-transparent whitespace-pre-wrap overflow-hidden active:outline-none focus:outline-none px-1 text-xl'
            />
            :
            <div key={i} onWheel={handleWheel}
            className='flex overflow-x-scroll w-full text-sm custom-scrollbar'>
            <CodeMirror
              value={block.value}
              readOnly={true}
              theme={tokyoNight}
              extensions={[langs.get(code.lang)]}
            />
          </div>
          ))}
          </article>
        <SippetDisplayFooter sippet={sippet} />
      </section>
    </article>
    :
    <SippetSkeleton />
  )

Answer 1

让我们明确您对实际发生的事情的理解。 useState实际上在重新渲染期间保留了 state 变量，因此，除非显式调用setState ，否则更改 prop 的值不会更改 state。

其次，你为什么要执行setFollowed(followed == sippet.followed? sippet.followed: sippet.followed) ？

你可以简单地写

useEffect(() => {
    setFollowed(sippet.followed); 
    // in case you want to make sure it is boolean
    // setFollowed(!!sippet.followed);
  }, [sippet.followed])