React组件SearchForm的experience属性需为含id和name数组值的技术咨询

首先我注意到你在state里初始化experience的方式有问题——你把React组件PropTypes的写法用到了state里，这是不对的。state应该直接初始化为你需要的空数组，而不是用{type: Array, default: ...}这种格式。

接下来我会帮你修正代码，同时确保experience始终是包含id和name属性的对象数组：

完整修正代码 #

import React from 'react';
import axios from 'axios';

class SearchForm extends React.Component {
  constructor(props) {
    super(props);
    // 正确初始化state：experience设为空数组
    this.state = {
      position: '',
      area: '',
      date: '',
      experience: [] 
    };
  }

  componentDidMount() {
    // 从接口获取字典数据，假设接口返回的experience选项是[{id: 1, name: "应届生"}, ...]格式
    axios({
      method: 'GET',
      url: 'https://example.com/dictionaries/',
      headers: {
        'User-Agent': 'React App/1.0 (myemail@gmail.com)'
      }
    })
    .then(response => {
      // 假设接口返回的数据里有experience字段，是符合要求的数组
      if (response.data?.experience) {
        this.setState({
          experience: response.data.experience
        });
      }
    })
    .catch(error => {
      console.error('获取字典数据失败:', error);
    });
  }

  // 如果你需要手动添加experience项（比如表单输入），可以加这个方法
  addExperienceItem = (id, name) => {
    // 确保添加的项包含id和name
    if (id && name) {
      this.setState(prevState => ({
        experience: [...prevState.experience, { id, name }]
      }));
    }
  };

  render() {
    return (
      <form>
        {/* 其他表单字段 */}
        <div>
          <label>工作经验:</label>
          {/* 示例：渲染experience选项 */}
          {this.state.experience.map(item => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      </form>
    );
  }
}

export default SearchForm;

关键改动说明 #

• 修正state初始化：把experience的错误写法改成空数组[]，这是React组件state正确的初始化方式。
• 接口数据处理：在componentDidMount中获取接口数据后，直接将符合{id, name}格式的数组赋值给state的experience。
• 添加项的校验：如果需要手动添加经验项，addExperienceItem方法会先校验id和name是否存在，再更新state，确保数组里的每个对象都包含这两个属性。

这样就能保证experience始终是一个包含id和name的对象数组啦～

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