React中NewPost组件key缺失报错及提交按钮失效问题求助

问题1：缺失唯一key prop报错 #

报错提示的两处来源及修复：

1. 表单输入列表渲染无key #

在useForm.js的renderFormInputs方法中，遍历表单字段生成组件时未添加唯一key。修改如下：

// useForm.js - renderFormInputs
const renderRepeatedSkeletons = (element, count) => {
  return Object.entries(form).map(([inputKey, inputObj]) => {
    const { value, label, errorMessage, valid, renderInput } = inputObj;
    // 将inputKey传递给renderInput，用于生成组件的key
    return renderInput(
      onInputChange,
      value,
      valid,
      errorMessage,
      label,
      onCustomInputChange,
      inputKey
    );
  });
};

同时确保renderInput函数在渲染实际输入组件时，添加key属性：

// 示例renderInput函数（根据实际实现调整）
const renderInput = (onChange, value, valid, error, label, customChange, key) => (
  <Input 
    key={key}
    name={key}
    value={value}
    onChange={onChange}
    // 其他属性...
  />
);

2. 骨架屏列表渲染无key #

utils/index.js中renderRepeatedSkeletons生成的重复元素未加key，修改并导入React：

// utils/index.js 顶部添加
import React from 'react';

// 修改renderRepeatedSkeletons函数
export const renderRepeatedSkeletons = (element, count) => {
  let skeletons = [];
  for (let i = 0; i < count; i++) {
    // 克隆元素并添加唯一key
    skeletons.push(React.cloneElement(element, { key: `skeleton-${i}` }));
  }
  return skeletons;
};

问题2：表单提交按钮无法工作 #

针对可能的三个原因逐一修复：

1. 改用form的onSubmit事件绑定提交逻辑 #

当前按钮用onClick绑定，改为给form添加onSubmit事件，同时设置按钮类型为submit：

// NewPost.js - form部分
<form className='form form__create' onSubmit={postSubmitHandle}>
  <h2>Create a new post</h2>
  {formInputs}
  <button
    type="submit"
    className='btn'
    disabled={!isFormValid()}
  >
    Submit <span>&rarr;</span>
  </button>
</form>

2. 确保图片上传字段的valid状态正确设置 #

如果图片上传用onCustomInputChange处理，选择文件后要将字段标记为有效：

// 示例图片上传组件的onChange处理
const handleImageChange = (e) => {
  const file = e.target.files[0];
  if (file) {
    onCustomInputChange('image', file, true); // 第三个参数设为true，标记字段有效
  } else {
    onCustomInputChange('image', null, false);
  }
};

3. 避免手动设置FormData的请求头 #

发送FormData时，浏览器会自动添加正确的multipart/form-data头，检查useHttpClient.js中的sendReq函数，若手动设置了Content-Type则移除：

// useHttpClient.js - sendReq函数示例（错误写法）
const headers = {
  'Content-Type': 'multipart/form-data', // 移除这一行
  Authorization: `Bearer ${token}`
};

// 正确写法
const headers = {
  Authorization: `Bearer ${token}`
};

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