React如何将子组件属性传递给父组件？动态按钮值传递报错问题

问题修复方案 #

核心错误点 #

• useState 违反Hook规则，写在了ProductScreen函数组件外部，必须放到组件内部顶层作用域
• 父组件向子组件传递的参数错误：应该传递setSrc更新函数，而非currentSrc值
• 子组件未接收父组件传入的相关props，点击事件没有正确传递选中的URL值
• 父组件初始currentSrc赋值时机错误，需要在product数据加载完成后处理初始值
• 组件return返回多个根节点没有包裹，不符合JSX语法规范

修正后的 ProductScreen 代码

import './ProductScreen.css';
import { useEffect, useState } from "react";
// 引入子组件
import { SizeOptions } from '../components/SizeOptions';

const ProductScreen = ({match}) => {
  // useState移到组件内部，初始值先设为空，等product加载后赋值
  const [currentSrc, setSrc] = useState('')
  // 监听product数据加载，完成后自动设置默认初始src
  useEffect(() => {
    if(product?.size?.length){
      const firstSize = product.size[0]
      const firstSizeName = Object.keys(firstSize)[0]
      setSrc(firstSize[firstSizeName][0])
    }
  }, [product])

  return(
    <>
      <div className='sizebuttons'>
        {product && (product.size || []).map((size, index) => (
          // 向子组件传递setSrc更新函数
          <SizeOptions  key={index} size={size} setSrc={setSrc}/>
        ))}
      </div>
      <div className="productscreen__right">
        <model-viewer
          id="model-viewer"
          src={currentSrc}
          alt={product.productName}
          ar
          ar-modes="scene-viewer quick-look"
          ar-placement="floor"
          shadow-intensity="1"
          camera-controls
          min-camera-orbit={product.mincameraorbit} 
          max-camera-orbit={product.maxcameraorbit}
          interaction-prompt="none">  
            <button slot="ar-button" className="ar-button">
              View in your space
            </button>
        </model-viewer>
      </div>
    </>
  )
}

修正后的 SizeOptions 组件代码

export const SizeOptions = ({ size, setSrc }) => {
  const sizeName = Object.keys(size)[0];

  // 点击时直接传入选中的URL值更新父组件状态
  const changeSize = (item) => {
    setSrc(item)
  }

  if (!sizeName) return <></>;

  return (
    <div>
        {size[sizeName].map((item) => (
          <button key={item} className='size' value={item} onClick={() => changeSize(item)}>
            {sizeName}
          </button>
        ))}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Wade Morrison