useState 钩子未使用正确的值初始化:数组
2020-02-17
1200
我将数组“默认值”传递到面板组件中,然后尝试将状态钩子“选定选项”设置为等于该值。由于某种原因,钩子反而设置了一个空数组。
组件:
const Panel = ({ title, inputs, datepicker, identifiers, apiBase, isins, defaults = [], notes = "" }) => {
const [expand, setExpand] = useState(false);
const [date, setDate] = useState(new Date());
const [selectedOption, setSelectedOption] = useState([...defaults]);
const [dataError, setDataError] = useState(false);
const [errorMsg, setErrorMsg] = useState('');
const [errorCheckLoading, setErrorCheckLoading] = useState(false);
const toggleExpand = () => {
setExpand(!expand);
console.log(defaults);
console.log(selectedOption);
};
仅供测试,我在切换展开函数中有几个控制台日志,以便我可以根据数据集测试传入的数据。
控制台日志的输出:
>(48) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
>[]
所以我知道数据输入正常,只是它没有在钩子中设置。
我也尝试过给钩子提供默认值和 [默认值] 的初始值。
现在一片空白 - 有什么想法吗?
编辑:这是提供默认值的父组件:
const Parent = () => {
const [all, setAll] = useState([]);
const [allLoadFailed, setAllLoadFailed] = useState(false);
const [defaults, setDefaults] = useState([]);
const [defaultsLoadFailed, setDefaultsLoadFailed] = useState(false);
useEffect(() => { loadData()}, []);
useEffect(() => { loadDefaultData()}, []);
const loadDefaultData = async () => {
try {
let defaultData = await GetDefaults();
setDefaults(defaultData.map(item => item = {value: item, label: item}));
} catch (_) {
setDefaultsLoadFailed(true);
}
};
const loadData = async () => {
try {
let iData = await GetAll();
let filteredIData = iData.filter(item => item);
setAll(filteredIData.map(item => item = {value: item, label: item}));
} catch (_) {
setAllLoadFailed(true);
}
};
return (
<Panel
title="Test"
isins={all}
defaults={defaults}
inputs
datepicker
identifiers
apiBase=""
notes="not yet complete"
key="2"
/>
);
2个回答
我在这里猜测
defaults
是来自 api 调用的值?
发生这种情况的原因是,在初始渲染中
defaults = []
和
useState
的第一个参数仅获取初始值,因此当
default
在第二次渲染中更改为正确数据时,
useState
已经具有
[]
值。
您应该做的是在
defaults
更改时使用
useEffect
钩子并设置
selectedOption
。
useEffect(() => {
setSelectedOption([...defaults])
}, [defaults, setSelectedOption])
Vencovsky
2020-02-17
检查您的解构,您正在将默认值设置为
defaults = []
。它只会先渲染空数组,然后组件将完成其挂载。您可能需要使用
useEffect
钩子来检查是否有新的更新,然后在此处设置
setSelectedOption(defaults)
,如下所示:
useEffect(() => {
setSelectedOption(defaults)
}, [defaults])
Claeusdev
2020-02-17