所以我发送了一个对象片段，其中字段'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正确地记录了日志，但是仍然是followed状态日志和初始化为undefined。why？sippet.follow是boolean，在本例中为true。
我试着用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 />
  )