类型中缺少属性"值"

Question

我目前正在尝试学习react，并且我正在遵循一个在web应用程序中显示poksammon列表的教程。我目前正在尝试通过表格更改一个poksamon的信息。但是我有以下错误，我不明白:

Property 'value' is missing in type '{ [x: string]: { value: string; }; }' but required in type 'Field'.

这是一段代码，它不是我的，它来自youtube教程，所以我不完全理解它:

import React, { FunctionComponent, useState } from 'react';
import Pokemon from '../models/pokemon';
import formatType from '../helpers/format-type';

type Props = {
pokemon: Pokemon
};
type Field = {
value: any,
error?: string,
isValid?: boolean
};
type Form = {
name: Field,
hp: Field,
cp: Field,
types: Field
}
const PokemonForm: FunctionComponent<Props> = ({pokemon}) => {

const [form, setForm] = useState<Form>({
name: { value: pokemon.name, isValid: true},
hp: { value: pokemon.hp, isValid: true},
cp: { value: pokemon.cp, isValid: true},
types: { value: pokemon.types, isValid: true},
});
const types: string[] = [
'Plante', 'Feu', 'Eau', 'Insecte', 'Normal', 'Electrik',
'Poison', 'Fée', 'Vol', 'Combat', 'Psy'
];
const hasType = (type: string): boolean => {
return form.types.value.includes(type);
}
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const fieldName: string = e.target.name;
const fieldValue: string = e.target.value;
const newField: Field = {[fieldName]: { value: fieldValue }};
setForm({ ...form, ...newField});
}
const selectType = (type: string, e:React.ChangeEvent<HTMLInputElement>): void => {
const checked = e.target.checked;
let newField: Field;
if(checked) {
//Si l'utilisateur coche un type, à l'ajoute à la liste des types du pokémon
const newTypes: string[] = form.types.value.concat([type]);
newField = { value: newTypes};
} else {
const newTypes: string[] = form.types.value.filter((currentType: string) => currentType !== type);
newField = { value: newTypes};
//Si l'uilisateur décoche un type, on le retire de la liste des types dy pokémon
}
setForm({ ...form, ...{ types: newField }});
}
return (
<form>
<div className="row">
<div className="col s12 m8 offset-m2">
<div className="card hoverable"> 
<div className="card-image">
<img src={pokemon.picture} alt={pokemon.name} style={{width: '250px', margin: '0 auto'}}/>
</div>
<div className="card-stacked">
<div className="card-content">
{/* Pokemon name */}
<div className="form-group">
<label htmlFor="name">Nom</label>
<input id="name" name="name" type="text" className="form-control" value={form.name.value} onChange={e => handleInputChange(e)}></input>
</div>
{/* Pokemon hp */}
<div className="form-group">
<label htmlFor="hp">Point de vie</label>
<input id="hp" name="hp" type="number" className="form-control" value={form.hp.value} onChange={e => handleInputChange(e)}></input>
</div>
{/* Pokemon cp */}
<div className="form-group">
<label htmlFor="cp">Dégâts</label>
<input id="cp" name ="cp" type="number" className="form-control" value={form.cp.value} onChange={e => handleInputChange(e)}></input>
</div>
{/* Pokemon types */}
<div className="form-group">
<label>Types</label>
{types.map(type => (
<div key={type} style={{marginBottom: '10px'}}>
<label>
<input id={type} type="checkbox" className="filled-in" value={type} checked={hasType(type)} onChange={e => selectType(type, e)}></input>
<span>
<p className={formatType(type)}>{ type }</p>
</span>
</label>
</div>
))}
</div>
</div>
<div className="card-action center">
{/* Submit button */}
<button type="submit" className="btn">Valider</button>
</div>
</div>
</div>
</div>
</div>
</form>
);
};

export default PokemonForm;

Answer 1

添加新类型和设置是这样的:

type NewFieldType = {[x:string]:  Field};
//code
const newField: NewFieldType = {[fieldName]: { value: fieldValue }};