类型错误：无法使用 React 将未定义转换为对象

如何解决类型错误：无法使用 React 将未定义转换为对象

我无法将数据设置为反应状态变量。它向我显示对象未定义。

我知道将对象作为组件的子级传递是非法的。有什么办法可以从嵌套对象中获取数据。在这里，我使用了递归，但没有运气。

// API Call
const fetchData = async () => {
  try {
    const response = await axios.get(
      "https://60d007f67de0b200171079e8.mockapi.io/bakery"
    );
    
    console.log('fetched data',response.data) // able to fetch the Data

    return response.data;
  } catch (err) {
    console.error(err);
  }
};


const extractData = (objects) => {
  const objectKeys = [];
  
  const values = Object.values(objects) // Object is undefine

  values.forEach(val => 
    val && typeof val === "object" ? extractnestedData(val) : objectKeys.push(val))
    
  return objectKeys;
  
}
const extractnestedData = (objects) => {
  const object = objects[0];
  const data = []
  data = extractData(object)
  return data;
}

export default function App() {
  const [bakery,setBakery] = useState([])
  const [flatBakery,setFlatBakery] = useState([])

  useEffect(() => {
    
    let mount1 = true;
    if(mount1){
      
    fetchData().then((randomData) => {
      setBakery(randomData)
      console.log('bakery',bakery) // not able to set the data.

    })
  }
  
  return () => { mount1 = false;}
  
  },[]);
  
  useEffect(() => {
    let mount2 = true;
    
    if (mount2) {
      
      setFlatBakery(extractnestedData(bakery));
    }
    
    return () => mount2 = false;
    
  },[bakery])
  
  return (
    <div>
      Hello
    </div>
  );
}

输出

我正在努力从 React 中的嵌套对象中获取数据。

解决方法

那是因为面包店最初是一个空列表。您应该只在获取面包店数据后调用 extractNestedData。

这是更新后的代码：

// API Call
const fetchData = async () => {
  try {
    const response = await axios.get(
      "https://60d007f67de0b200171079e8.mockapi.io/bakery"
    );

    console.log("fetched data",response.data); // able to fetch the Data

    return response.data;
  } catch (err) {
    console.error(err);
  }
};

const extractNestedData = (objects) => {
  const objectKeys = [];

  const values = Object.values(objects);

  values.forEach((val) =>
    val && typeof val === "object"
      ? extractNestedData(val)
      : objectKeys.push(val)
  );

  return objectKeys;
};

export default function App() {
  const [bakery,setBakery] = useState([]);
  const [flatBakery,setFlatBakery] = useState([]);

  useEffect(() => {
    let mount1 = true;
    if (mount1) {
      fetchData().then((randomData) => {
        setBakery(randomData);
        console.log("bakery",bakery); // not able to set the data.
      });
    }

    return () => {
      mount1 = false;
    };
  },[]);

  useEffect(() => {
    let mount2 = true;

    if (mount2 && bakery.length > 0) {
      setFlatBakery(extractNestedData(bakery[0]));
    }

    return () => (mount2 = false);
  },[bakery]);

  return <div>Hello</div>;
}