選択されたドロップダウンアイテムをプロップに解析しようとしています。次のエラーが発生します。
TypeError: Cannot read property 'name' of undefined
新しいプロップを作成して解析しようとしましたが、それも機能しませんでした。また、すべての配列を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
};
React selectは、値がドロップダウン値の1つと一致することを期待しています-So
value={location} //needs to match the object {value:string, label:string}
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>
</>
);
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加