为什么数组查找没有返回任何内容？使用上下文和参数

Question

我有每个产品信息的页面组件：

export default function Product() {
  const { data } = useContext(ShopContext);
  const { id } = useParams();
  
  if (!data) {
    return <div>Loading product...</div>;
  }

  const product = data.find((item) => item.id === id);

  return (
    <div>
      {product.title}
    </div>
  );
}

虽然数据和id可以登录到控制台并且它们的值可用，但不知何故产品未定义，我这样确保它：

export default function Product() {
    const { data } = useContext(ShopContext);
    const { id } = useParams();

    if (!data) {
      return <div>Loading product...</div>;
    }

    console.log(id);

    return (
    <div>
    {data.map(item => (
      <div key={item.id}>
        {item.title}
      </div>
    ))}
    </div>
    );
  }

当我什至不明白发生了什么时，我真的找不到解决方案，但我也这样做了，但页面上仍然没有任何内容（网址是正确的，并且显示了加载div）：

export default function Product() {
  const { data } = useContext(ShopContext);
  const { id } = useParams();

  if (!data) {
    return <div>Loading product...</div>;
  }

return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          {item.id === id ? item.title : null} 
        </div>
      ))}
    </div>
  );
}

有关其他信息，我正在应用程序组件中从 fakestoreapi.com 获取数据，并且它在其他组件中运行良好。这是最吸引人的部分：

useEffect(() => {
    async function FetchData() {
      try {
        const response = await fetch("https://fakestoreapi.com/products");
        if (!response.ok) {
          throw new Error(`HTTP error: Status ${response.status}`);
        }
        let postsData = await response.json();
        postsData.sort((a, b) => {
          const nameA = a.title.toLowerCase();
          const nameB = b.title.toLowerCase();
          return nameA.localeCompare(nameB);
        });
        setData(postsData);
        setError(null);
      } catch (err) {
        setData(null);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    FetchData();
  }, []);

这是上下文：

import { createContext } from "react";

export const ShopContext = createContext({
  data: [],
  loading: true,
  error: "",
  setData: () => {},
  cart: [],
  addToCart: () => {},
  removeFromCart: () => {},
});

这是它在应用程序组件中的状态：

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [cart, setCart] = useState([]);

const addToCart = (productId) => {
  ....
};

const removeFromCart = (productId) => {
  .....
};

我真的不知道问题是什么以及要搜索什么。

Answer 1

我复制了部分代码来说明你犯了什么错误以及如何纠正它。

context.jsx

import {createContext, useState} from 'react';

export const ShopContext = createContext();
const ShopProvider =  ({ children }) => {
  const [data, setData] = useState([]);

  const defaultContext = {
    data,
    setData,
  };

  return (
    <ShopContext.Provider value={defaultContext}>
      {children}
    </ShopContext.Provider>
  );
};
export default ShopProvider;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import ShopProvider from './context';

import { App } from './App.jsx'

ReactDOM.createRoot( 
  document.querySelector('#root')
).render(<ShopProvider><App /></ShopProvider>)

应用程序.jsx

import React, {useContext, useEffect } from 'react';
import {ShopContext} from './context';
import Product from './Product';

export function App(props) {
  const {setData} = useContext(ShopContext);
  useEffect(() => {
    async function FetchData() {
      try {
        const response = await fetch("https://fakestoreapi.com/products");
        if (!response.ok) {
          throw new Error(`HTTP error: Status ${response.status}`);
        }
        let postsData = await response.json();
        postsData.sort((a, b) => {
          const nameA = a.title.toLowerCase();
          const nameB = b.title.toLowerCase();
          return nameA.localeCompare(nameB);
        });
        setData(postsData);
      } catch (err) {
        setData([]);
      }
    }
    FetchData();
  }, []);
  return (
      <div className='App'>
        <Product />
      </div>
  );
}

产品.jsx

import {useContext} from 'react';
import {ShopContext} from './context';

export default function Product() {
  const { data } = useContext(ShopContext);
  const id = 1;
  
  if (!data) {
    return <div>Loading product...</div>;
  }

  const product = data.find((item) => item?.id === id);

  return (
    <div>
      {product?.title}
    </div>
  );
}

如果您在理解此插图时遇到任何问题，请告诉我。