开发者问题收集

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