React表单警告及NFT转售功能失效问题求助

一、表单警告问题修复 #

问题原因 #

警告提示「提供了value属性但未设置onChange」，但当前代码中的price输入框只配置了onChange未绑定value，大概率是以下两种情况：

1. 自定义Button组件内部包含受控表单元素（比如带value属性的按钮/输入框），但未配置对应的onChange处理函数；
2. price的初始值为'"'（带双引号的字符串），与输入框type="number"不兼容，导致渲染时触发异常警告。

修复步骤 #

1. 将price输入框改为受控组件，绑定value属性，并修正初始值为合法格式：

// 修正price初始值为空白字符串（或合法数字，比如"0"）
const [price, setPrice] = useState("");

// 给input添加value绑定
<input
  type="number"
  min={1}
  placeholder="reSell price"
  className={formStyle.Form_box_input_userName}
  value={price}
  onChange={(e) => setPrice(e.target.value)}
/>

2. 检查自定义Button组件：如果组件内部有带value的元素，要么添加onChange处理，要么设置readOnly属性，或者改用defaultValue。

二、转售功能失效问题修复 #

问题原因 #

1. 依赖数组错误：fetchNFT的useEffect依赖的是id，但实际逻辑依赖的是tokenURI，导致tokenURI变化时无法触发图片加载，甚至可能在tokenURI未就绪时调用合约方法；
2. price格式异常：初始值是带双引号的字符串'"'，传给合约的createSale方法时，格式不符合数字类型要求；
3. 参数未校验：调用createSale前未检查tokenURI、price、id是否存在，可能传入无效参数导致合约调用失败。

修复步骤 #

1. 修正useEffect的依赖数组，改为监听tokenURI：

useEffect(() => {
  fetchNFT();
}, [tokenURI]); // 替换原有的[id]

2. 修正resell函数，添加参数校验并转换price格式：

const resell = async () => {
  try {
    // 校验参数合法性
    if (!tokenURI || !id || !price || isNaN(Number(price)) || Number(price) < 1) {
      alert("请填写有效的转售价格，且参数不能为空");
      return;
    }
    // 将price转为数字类型，适配合约要求
    await createSale(tokenURI, Number(price), true, id);
    router.push("/author");
  } catch (error) {
    console.log("Error while resell", error);
  }
};

3. 可选：添加页面加载状态，避免参数未就绪时显示交互元素：

// 在return前添加
if (!id || !tokenURI) {
  return <div>加载中...</div>;
}

内容的提问来源于stack exchange，提问作者Manish Kamble