arrays - 我无法从数组中获取值

Question

当我尝试从 fakeData 获取值时，它在 foodDetails 中显示未定义。但其他显示输出正确。如果我放置静态数据，那么它会显示像这样的值 const 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;

标签： arraysreactjsdynamicurl-parameters

Answer 1

因为foodIdfromuseParams是未定义的？只需将 useEffect 与useStateto control结合使用foodDetails。

const [foodDetails, setFoodDetails] = useState();

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