在OptionColor.js的第25行，您尝试从props访问setCurrentColor()，这很可能是抛出错误的地方，这是因为在Product.js的第73行，使用<OptionColor>组件，您没有传入名为“setCurrentColor”的prop，它等于一个函数。
为了解决这个问题，我认为您应该在Product.js的第73行执行以下操作：

<OptionColor colors={props.colors} setCurrentColor={setCurrentColor} />

在OptionColor.js文件中，你调用了props.setCurrentColor(color)，但是这个函数并不存在，因为父文件没有定义属性。
在Product.js文件中，添加以下内容：

<OptionColor
    colors={props.colors}
    setCurrentColor={setCurrentColor}
  />

出现错误的原因：
在OptionColor组件中，代码描述了每当单击按钮时，它将调用props.setCurrentColor(whatever-color)，如下所示：

<button onClick={() => props.setCurrentColor(color)}></button>

这是告诉React调用传入组件的setCurrentColor参数，问题是，Product组件没有传入setCurrentColor函数，只传入了colors数组。

<OptionColor colors={props.colors} />

要修复：
将Product组件中的OptionColor用法更改为：

<OptionColor colors={props.colors} setCurrentColor={setCurrentColor} />

为OptionColor提供一种更改其父级状态的方法。

这是您的OptionColor.js：

import React from 'react';
import styles from './OptionColor.module.scss';
import shortid from 'shortid';
import clsx from 'clsx';

const OptionColor = (props) => {
  const prepareColorClassName = (color) => {
    return styles[
      'color' + color[0].toUpperCase() + color.substr(1).toLowerCase()
    ];
  };

  return (
    <div className={styles.colors}>
      <h3 className={styles.optionLabel}>Colors</h3>
      <ul className={styles.choices}>
        {props.colors?.map((color) => (
          <li key={shortid()}>
            <button
              type='button'
              className={clsx(
                prepareColorClassName(color),
                props.currentColor === color ? styles.active : undefined
              )}
              onClick={() => props.setCurrentColor(color)}></button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default OptionColor;

在<li>的底部是这一行，它试图调用一个setCurrentColor，这个函数没有传递给组件（它是未定义的）：

onClick={() => props.setCurrentColor(color)}></button>

溶液

在Product.js中，更改：

<OptionColor colors={props.colors} />

收件人：

<OptionColor colors={props.colors} setCurrentColor={setCurrentColor} />