React组件数据传递问题：如何将获取的cropsData传入SearchCard

方法：使用React状态管理（useState） #

这是最直接的实现方案，通过在父组件中维护数据状态，再将状态作为props传递给SearchCard组件，具体步骤如下：

1. 父组件修改

首先在父组件中引入useState，定义存储作物数据的状态，并在请求成功后更新状态：

import { useState } from 'react';
import SearchCard from './SearchCard'; // 引入SearchCard组件

function ParentComponent() {
  const [search, setSearch] = useState(''); // 搜索关键词状态
  const [crops, setCrops] = useState([]); // 存储获取到的作物数据
  const [isLoading, setIsLoading] = useState(false); // 加载状态

  const handleSearch = async () => {
    if (!search) return;
    setIsLoading(true);
    try {
      const { data } = await getCropDetails(search);
      setCrops(data.crops); // 将请求到的作物数据存入状态
    } catch (error) {
      console.error('获取作物数据失败:', error);
      // 可在此添加错误提示逻辑
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      {/* 搜索输入区域 */}
      <input 
        type="text" 
        value={search} 
        onChange={(e) => setSearch(e.target.value)} 
        placeholder="输入作物名称搜索"
      />
      <button onClick={handleSearch}>搜索</button>

      {/* 加载状态提示 */}
      {isLoading && <p>加载中...</p>}

      {/* 传递数据给SearchCard */}
      {crops.length > 0 ? (
        <SearchCard data={crops} />
      ) : (
        !isLoading && <p>暂无数据，请搜索作物</p>
      )}
    </div>
  );
}

2. SearchCard组件修改

调整组件逻辑，使其能接收并渲染传入的作物数据，支持数组（多作物）和单个对象（单作物）两种场景：

import * as React from 'react';
import Card from '@mui/material/Card';
import { Stack, CardActions, CardContent, CardMedia, Button, Typography } from '@mui/material';
import { Link } from 'react-router-dom';

function SearchCard({ data }) {
  // 处理数组类型数据，生成多张卡片
  if (Array.isArray(data)) {
    return (
      <Stack direction="row" flexWrap="wrap" gap={2} alignItems='center' justifyContent='center'>
        {data.map((crop, index) => (
          <Card key={index} sx={{ maxWidth: 300 }}>
            <CardMedia
              style={{ height: "300px" }}
              component="img"
              image={crop.image || "https://source.unsplash.com/random"}
              alt={crop.name || "作物"}
            />
            <CardContent>
              <Typography gutterBottom variant="h5" component="div">
                {crop.name}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                {crop.description || "暂无描述信息"}
              </Typography>
            </CardContent>
            <Stack alignItems='center'>
              <Link to={`/details/${crop.id}`} style={{ textDecoration: 'none' }} >
                <CardActions>
                  <Button size="small">查看详情</Button>
                </CardActions>
              </Link>
            </Stack>
          </Card>
        ))}
      </Stack>
    );
  }

  // 处理单个对象类型数据，渲染单张卡片
  return (
    <Stack alignItems='center' justifyContent='center'>
      <Card sx={{ maxWidth: 300 }}>
        <CardMedia
          style={{ height: "300px" }}
          component="img"
          image={data?.image || "https://source.unsplash.com/random"}
          alt={data?.name || "作物"}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            {data?.name || "未知作物"}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {data?.description || "暂无描述信息"}
          </Typography>
        </CardContent>
        <Stack alignItems='center'>
          <Link to={`/details/${data?.id}`} style={{ textDecoration: 'none' }} >
            <CardActions>
              <Button size="small">查看详情</Button>
            </CardActions>
          </Link>
        </Stack>
      </Card>
    </Stack>
  );
}

export default SearchCard;

补充说明 #

• 加入isLoading状态，避免请求过程中出现空白或错误内容
• 增加数据容错处理（可选链?.），防止数据未加载时触发报错
• 为详情链接添加动态路由参数，方便跳转到对应作物的详情页
• 处理了数据为空的场景，给出友好提示

内容的提问来源于stack exchange，提问作者Akash Suklabaidya