我的 react-dropdown-select 项未定义

Question

我正在尝试将选择的下拉项解析为 Prop。我收到一个错误

TypeError: Cannot read property 'name' of undefined

我试图制作一个新的 Prop 并在那里解析它，但也没有用。我还尝试将所有数组添加到 formData 中，但无济于事。当我不添加下拉菜单时，格式和位置解析没有问题，一旦它们更改为下拉菜单，它就不会被读取。我认为下拉菜单将它们更改为另一种格式而不是字符串。 .

addFixture.js代码如下：


const AddFixture = ({ addFixture, history }) => {
  const [formData, setFormData] = useState({
    teams: '',
    opposition: '',
    date: '',
    format: '',
    location: '',
  });

  const {
    teams,
    opposition,
    date,
    format,
    location
  } = formData;

  const overs  = [
    { value: '40 Overs', label: '40 Overs' },
    { value: '20 Overs', label: '20 Overs' },
  ]

  const hOrA = [
    { value: 'Home', label: 'Home' },
    { value: 'Away', label: 'Away' },
  ]

  const onChange = (e) =>
setFormData({ ...formData, [e.target.name]: e.target.value });


 
      <form
        className="form"
        onSubmit={(e) => {
          e.preventDefault();
          addFixture(formData, history);
        }}
      >

        <div className="form-group">
          <Select
            type="text"
            placeholder="* Location"
            name="location"
            value={location}
            options={hOrA}
            onChange={onChange}
            required
          />
        </div>
        <div className="form-group">
          <Select
            type="text"
            placeholder="* format"
            name="format"
            value={format}
            onChange={onChange}
            options={overs}
            required
          />
        </div>
      
      </form>

  );
};

AddFixture.propTypes = {
  addFixture: PropTypes.func.isRequired
};

Answer 1

React select 期望该值与下拉列表值之一相匹配 - 所以
value={location} //needs to match the object {value:string, label:string}
React select 将 selected 选项的完整值传递给 onChange so
```
onChange={onChange} //onChange={(val:{value:label}) => {}}
```
您可以像这样传入下拉列表的名称

onChange={(val) => onChange(val,nameOfDropdown )}

然后像这样使用传入的名称
```
const onChange = (selected, name) =>{        
    setFormData({ ...formData, [name]: selected.value });
}
```

经过所有这些更改后，您的代码应如下所示

const AddFixture = () => {
    const [formData, setFormData] = useState({
     format: '',
     location: '',
    });

    const {
      format,
      location
    } = formData;

   const overs  = [
      { value: '40 Overs', label: '40 Overs' },
      { value: '20 Overs', label: '20 Overs' },
    ]

    const hOrA = [
      { value: 'Home', label: 'Home' },
      { value: 'Away', label: 'Away' },
    ]

   /** onChange will get passed value from the dropdown {value:string, label:string} */
    const onChange = (selected, name) =>{        
        setFormData({ ...formData, [name]: selected.value });
    }

    return(
      <>
          <div className="form-group">
            <Select
              type="text"
              placeholder="* Location"
              name="location"
              /** Need to set this to one of the dropdown values  {value:string, label:string} */
              value={hOrA.find((val) => val.value === location)}
              options={hOrA}
              onChange={(val) => onChange(val,"location" )}
              required
            />
          </div>
          <div className="form-group">
            <Select
              type="text"
              placeholder="* format"
              name="format"
              /** Need to set this to one of the dropdown values  {value:string, label:string} */
              value={hOrA.find((val) => val.value === format)}
              onChange={(val) => onChange(val,"format" )}
              options={overs}
              required
            />
          </div>
       </>
    );
};

我的 react-dropdown-select 项未定义

My react-dropdown-select item is undefined

reactjs

react-select