React state 是空的，即使它确实有一个值

Question

const CourseTags = () => {
    const [tags, setTags] = useState([])

    useEffect(() => {
        const jwt = sessionStorage.getItem("jwt")

        // GET tags
        fetch(`${process.env.NEXT_PUBLIC_HOST}/api/tags`, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${jwt}`
            }
        })
            .then(res => res.json())
            .then(data => {
                setTags(data)
                console.log(data) // <<<<<<< shows Array of tags [ {}, {}, ... ]
            })
            .catch(err => {
                console.log(err)
            })
    }, [])


    const deleteTag = (tagId) => {

        if (confirm("Delete Tag?")) {
            console.log(tags, tagId) // <<<<<<<<< tags = [ ]
         }
    }


    return (
      <Fragment>
           <TagsList tagsList={tags} handleDeleteTag={(tagId) => deleteTag(tagId)} />
      </Fragment>
)
}

当调用 deleteTag function.. 它显示 tagsList 为 [ ]

// console.log(tags, tagId) 显示 --> // [] '63d65592bac78b25feb8f482'

*** 知道我正在从另一个子组件调用 deleteTag(tagId) ***

Answer 1

我在我的子组件的useMemo() 中错过了依赖数组[tagsList]一旦添加它就解决了问题

const TagsList = ({tagsList, handleDeleteTag}) => {

      const columns = useMemo(() => [{}, {}, ...] , [tagsList]) // <<<< [tagsList] was missed

    .....

}

感谢帮助，