反应和打字稿使用对象上的状态

Question

我在 React 组件中有一个类型product：

type TProduct = {
name: string,
price: string,
stock: string
}

我希望通过输入框更改其中的值：

const AddProductCard: React.SFC = () => {
const classes = useStyles();
const [product, setProduct] = React.useState({ product:{} as TProduct})
return (
<input 
onChange={e => setProduct({...product ,product: {name: e.target.value }})}
/>
<input 
onChange={e => setProduct({...product ,product: {stock: e.target.value }})}
/>
<input 
onChange={e => setProduct({...product ,product: {price: e.target.value }})}
/>
)
}

我认为通过添加...product它会复制product中的所有相同值，然后更改我想要的值，但这似乎不起作用。它将设置一个新的产品对象，尽管它只会使用最近输入的输入重写对象的全部内容。

然后，我尝试了一种不同的界面方法，其中：

interface IProduct {
name: string;
price:  string;
stock: string;
}

和

const [product, setProduct] = React.useState<IProduct | undefined>(undefined);

并使用我之前显示的类似状态更改，但唉，这只发生在另一个新错误中(我想我不确定如何在 react 中正确使用接口(。

Answer 1

除了为输入上的onChange事件提供方法外，您还需要指定value。例如

value={product.name}

此外，我不确定为什么product状态是深度嵌套的，因为在这种情况下没有必要更深入一层，这将降低您需要更新每个onChange事件的产品状态时的复杂性。只需分散当前产品状态，然后使用新值更新属性。例如

setProduct({
...product, 
name: e.target.value 
});

此外，在键入产品状态时，无需断言是TProduct.鉴于属性可能未定义，您可以保留以下接口，

interface TProduct {
name: string;
price:  string;
stock: string;
}

并将product的类型设置为Partial<TProduct>.

最后但并非最不重要的一点是，如果您使用的是较新版本的 React，则只需将您的组件键入React.FC.

这就是组件的外观。

const AddProductCard: React.FC = () => {
const classes = useStyles();
const [product, setProduct] = React.useState<Partial<TProduct>>({});
return (
<input 
value={product.name || ''}
onChange={e => setProduct({...product, name: e.target.value })}
/>
<input 
value={product.stock || ''}
onChange={e => setProduct({...product, stock: e.target.value })}
/>
<input 
value={product.price || ''}
onChange={e => setProduct({...product, price: e.target.value })}
/>
)
}

Answer 2

你想传播到一个新对象中，然后覆盖你需要的属性，例如

setProduct({ 
product: {
...product,
name: e.target.value
}
});

虽然，鉴于您只是设置product您可能不希望将其设置为状态的嵌套属性，而只是使其成为状态本身。