类型错误： 无法解构'uniqueWords'的属性'uw'，因为它未定义

Question

试图传递uniqueWords数组。

在排行榜上，uniqueWords以未定义、的形式出现

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

尽管在Filter中，我通过uniqueWords进行映射，但我使用了相同的检查，并且它有效。

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

主页

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

不能将数组作为对象进行析构函数。

Const {uw} = someArray

无效语法。使用[]而不是｛｝

Answer 2

这是我能想到的最好的选项。尽管它看起来真的很生气。

使用state声明uw的const。

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

关注uw&uniqueWords

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