类型错误：无法在 React 中将 undefined 转换为对象

如何解决类型错误：无法在 React 中将 undefined 转换为对象

我可以从 API 获取数据，但无法将数据设置为 react 状态变量。使用 useEffect。这很奇怪，因为最初代码运行良好，我能够将数据设置为状态变量，但是在编写了一堆代码之后。我收到此错误。

App.js

const fetchData = async () => {
    try {
        const response = await axios.get(
            "https://60d007f67de0b200171079e8.mockapi.io/bakery"
        );
        const { data } = response;
        return data;
    } catch (err) {
        console.error(err)
    }

};

const extractData = (bakerys) => {
    const bakery = bakerys[0];
    const header = [];

    Object.keys(bakery).forEach((objKeys) => {
        const value = bakery[objKeys];
        //  if(type of value !==  'object'){
        header.push(objKeys);
    })

    return header;
};

export default function App() {
    const [bakerys,setBakerys] = useState([]);
    const [flatbakery,setFlatbakery] = useState([]);

    useEffect(() => {
        fetchData().then((randomData) => {

            console.log('randomData ->',randomData) // able to console data as an Array of object

            setBakerys(randomData); // Not able to set the randomData into state variable
            console.log('bakerys',bakerys)

        })

    },[]);

    useEffect(() => {
        setFlatbakery(extractData(bakerys));
    },[bakerys]);

    return (
        <div className="App">
            <h1>Hello CodeSandBox</h1>
            <h2>Edit to see some magic happen!</h2>
            <table>
                <thead>
                    <tr>
                        {flatbakery.map((headers,idx) => (
                            <th key={idx}>
                                {headers}
                            </th>
                        ))
                        }
                    </tr>
                </thead>
            </table>
        </div>
    );
}

输出

解决方法

当您的 bakerys 数组为空时会出现这种情况，即 bakerys[0] 本质上是 undefined。在尝试迭代它的键之前，您可能需要添加某种检查。

const extractData = (bakerys) => {
    const bakery = bakerys[0];
    const header = [];

    if(bakery) { // only run the following block if bakery is not undefined(or falsey)
    Object.keys(bakery).forEach((objKeys) => {
        const value = bakery[objKeys];
        //  if(type of value !==  'object'){
        header.push(objKeys);
    })
    }

    return header;
};

编辑：看来我忘了提及为什么面包店最初可能是空的。 UseEffect 也在组件挂载时运行，因此第一次调用它时，bakerys 仍然是一个空数组。随着对它的后续更新，它最终将填充数据，因此在尝试对其运行任何操作之前，您应该始终尝试检查该值是否已填充。