Блог

Я пытаюсь разобрать элемент выпадающего списка, который выбран в 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
};

 

1. React select ожидает, что значение будет соответствовать одному из выпадающих значений, поэтому
   value={location} //needs to match the object {value:string, label:string}
2. React select передает полное значение выбранного параметра в onChange, чтобы

    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>
       </>
    );
};