对复杂对象做出反应

Question

在我们的 React 组件中，我们从 REST api(比如说 Car(接收一个对象，允许用户进行更改，并最终保存结果。

为了方便这一点，我们创建了一个自定义的反应钩子来接收状态。示例可能如下所示：

type Car = {
brand: string,
color: string
}
type Props = {
// A service that handles cars
service: Service<Car>
}
function CarEditor(service: Service<Car>) {
const { loading, error, resourceState } = useService(service);
return <form>
<input value={resourceState.brand} />
<input value={resourceState.color} />
</form>;

}

在上面的示例中，resourceState的类型为Car。

我在如何对这辆车进行改装方面有点挣扎。一个想法是，我们使用对setState的调用来管理此对象：

function CarEditor(service: Service<Car>) {
const { loading, error, resourceState } = useService(service);
const [ car, updateCar ] = useState(resourceState);
return <form>
<input value={resourceState.brand} />
<input value={resourceState.color} />
</form>;
}

注意：为简洁起见，我省略了事件处理程序

问题：

1. 我是否应该对Car的每个属性使用 1 次调用来使用状态。对于复杂对象来说，这似乎是很多重复，但我担心使用整个对象是一种反模式。
2. useService本身公开一个updateResourceState函数，并完全包含 Car 的状态，而不是在主组件中useState调用会更好吗？

对这一切来说都是全新的，我正在尝试以遵循最佳实践的方式设计它，并且对于坐着的 React 开发人员来说，惊喜最少。

Answer 1

1. 如果将复杂对象存储在功能组件的状态中，则不是反模式，建议使用useReducer。而且您具有Car类型的resourceState一点也不复杂。
2. 取决于您的useService.如果您将resourceState存储为useService中的状态，您只需在useService中进行更新resourceState函数并在CarEditor组件中调用它，它将是干净的且易于维护。