TypeError:无法对“uniqueWords”的属性“uw”进行变形，因为它未定义

Question

试图传递一个uniqueWords数组。

在图表上，最初的uniqueWords是以不确定的方式出现的，

我试着做一次( uniqueWords && uniqueWords)检查，但没有成功。

尽管在我通过uniqueWords映射的过滤器中，我使用了相同的检查，而且它可以工作。

我知道这可能是一个简单的问题，但我感到困惑。

Home

const Home = () => {
    const [uniqueWords, setUniqueWords] = useState()
    const [filter, setFilter] = useState(null)

    const handleData = () => {
        const categoryData = data.map(word => word["Parent Category"])
        const uw = [...categoryData.reduce((map, obj) => map.set(obj, obj), new Map()).values()]
        setUniqueWords(uw)
    }

    useEffect(() => {
        handleData()
    }, [])

    return (
        <div className={`w-screen h-screen bg-[#121212] text-xl text-gray-400 overflow-x-hidden`}>
            <Filter
                setFilter={setFilter}
                uniqueWords={uniqueWords}
            />
            <div className={`flex h-[70%]`}>
                <Charts
                    uniqueWords={uniqueWords}
                />
            </div>
            <div className={`flex-grow bg-slate-900`}>
                <DataTable filter={filter}/>
            </div>
        </div>
    )
}

图表-未定义错误

const charts = ({uniqueWords}) => {
    const [data, setData] = useState([])
    
    const {uw} = uniqueWords && uniqueWords

    const fdata = () => {
        for (let i = 0; i <= uniqueWords[i].length; i++) {
            setData(mdata.filter(items => items.name === uniqueWords[i]))
            console.log('test')
        }
    }

    useEffect(() => {
        fdata()
    }, [])

滤波器-工作检查

const Filter = ({setFilter, uniqueWords}) => {
    const handleClick = (item) => {
        setFilter(item.item.toLowerCase())
    }

    const handleReset = () => {
        setFilter(null)
    }

    return (<div className={`absolute top-4 left-4 flex-col shadow-xl z-20 h-min w-max`}>
            <div className={`p-4 bg-slate-900`}>
                {uniqueWords && uniqueWords.map(item =>
                    <div key={Math.random()} className={`flex items-center mb-2`}>
                        <input type={'checkbox'}/>
                        <div onClick={() => handleClick({item})} className={`ml-2 text-sm`}>{item}</div>
                    </div>
                )}
                <div className={`flex  items-center w-full mt-4 rounded-md bg-slate-800`}>
                    <div onClick={() => handleReset()}
                         className={`text-md w-full text-center cursor-pointer p-2`}>Reset</div>
                </div>
            </div>
        </div>
    )
}

export default Filter

Answer 1

不能将数组分解为objet。

Const {uw} = someArray

是无效的语法。使用[]而不是{}

Answer 2

这是我能想到的最好的选择。虽然这看起来很烦人。

使用状态声明uw的const。

只有在uw存在时才运行函数。

监视uw & uniqueWords的更新

    useEffect(() => {
        if (uniqueWords) {
            setUw(uniqueWords)
            if (uw) {
                fdata()
            }
        }
    }, [uniqueWords, uw])