如何在React组件间传递表单选中数据渲染动态狗狗信息？

问题核心 #

你代码里的关键问题有两点：

1. Form组件调用onDogChange时传递的是旧的选中值（React的setState是异步操作，无法立刻获取更新后的值）
2. DogCard组件既没有给Form传递回调函数，也没有维护动态状态来渲染选中的狗狗信息

分步修改方案 #

1. 修复Form组件的回调参数传递

把onDogChange的参数改成e.target.value，确保传递最新选中的狗狗名称：

import React, { useState } from 'react';
import { dogs } from '../components/Data';
import '../stylesheets/Form.css';

function Form ({onDogChange}) {
  const [selectedDog, setSelectedDog] = useState('Pug')

  const handleChange = e => {
    const newSelectedDog = e.target.value;
    setSelectedDog(newSelectedDog);
    onDogChange(newSelectedDog); // 直接传递最新选中值
  }

  return (
    <>
      <label className="choose" htmlFor='dogs'>Choose your dog:
      <select value={selectedDog} onChange={handleChange}>
        {dogs.map((dog) => (
          <option
            className="option" 
            key={dog.name} 
          >
            {dog.name}</option>
        ))}
      </select>
      </label>
      <p>Your favorite dog: {selectedDog}</p>
    </>
  )
}

export default Form;

2. 修改DogCard组件，添加状态与数据匹配逻辑

在DogCard中维护选中狗狗的状态，接收Form传递的选中值后，用find从数据源中匹配完整信息，同时修复图片路径：

import React, {useState} from 'react';
import Form from './Form';
import { dogs } from '../components/Data';

function DogCard() {
  // 初始化选中默认狗狗Pug
  const [currentDog, setCurrentDog] = useState(dogs.find(dog => dog.name === 'Pug'));

  // 处理Form传来的狗狗名称变化
  const handleDogChange = (dogName) => {
    const matchedDog = dogs.find(dog => dog.name === dogName);
    if (matchedDog) {
      setCurrentDog(matchedDog);
    }
  }

  return (
    <>
      {/* 传递回调函数给Form */}
      <Form onDogChange={handleDogChange} />
      <div className="container">
        <img 
          className="fotodog"
          src={`/imagenes/${currentDog.image}.jpg`} // public资源直接用根路径访问
          alt={currentDog.alttext} // 使用数据里的官方描述文本
          />
        <div className="text-container">
          <p className="dogname">{currentDog.name}</p>
          <p className="origin">{currentDog.origin}</p>
          <p className="phrase">{currentDog.phrase}</p>
          <p className="trivia">{currentDog.trivia}</p>  
        </div> 
      </div>
    </>
  )
}

export default DogCard

关键逻辑说明 #

• 状态提升：把选中狗狗的状态放到父组件DogCard中，Form只负责触发选择事件并传递值
• 异步状态处理：绕过setState的异步特性，直接使用事件目标的最新值传递回调
• 数据匹配：用Array.find()根据名称精准定位数据源中的狗狗对象，实现动态渲染

内容的提问来源于stack exchange，提问作者Pedro Arévalo