我无法从数组中获取值

Question

当我尝试从 fakeData 获取值时，它在 foodDetails 中显示未定义。但其他显示输出正确。 如果我放置静态数据，那么它会显示这样的值 常量 foodDetails = foodFakeData.find(pd => pd.id === 101); 但是如果我输入“foodId”，那么它会显示未定义的原因？ 在 console.log('foodDetails',foodId, foodDetails) 中显示“foodDetails 112 undefined”

const FoodDetails = () => {
const { foodId} = useParams();
const foodDetails = foodFakeData.find(pd => pd.id === foodId);
console.log('foodDetails',foodId, foodDetails);
    return (
        <div>
            <h3>Hello {foodId}</h3>
        </div>
    );
};
export default FoodDetails;

Answer 1

因为来自useParams 的foodId 未定义？只需使用 useEffect 结合useState 即可控制foodDetails。

const [foodDetails, setFoodDetails] = useState();

useEffect(() => {
  if(foodId) {
    setFoodDetails(foodFakeData.find(pd => pd.id === foodId));
  }
}, [foodId]);