ReactJS 中的开闭原则

Question

假设我有两个与同一域相关的不同列表，例如：

const [peopleList, setPeopleList] = useState([])
const [equipmentList, setEquipmentList] = useState([])

我只定义了一个处理程序来处理这些列表上的更改：

const handleListChange = (e, type) => {
  type === 'people' 
    ? setPeopleList(e.target.value)
    : setEquipmentList(e.target.value)
}

并将其传递给不同的组件：

<Component onChange={e => handleListChange(e, type)} />

我不遵守开放/封闭原则，因此如果我有第三个选项，我将不得不更改我的处理程序以处理新选项。

我的问题是：对于这些类型的情况是否有更好的构造/最佳实践？

提前致谢。

Answer 1

你可以定义一个状态：

const [state, setState] = useState({
  people: [],
  equipment: [],
  // ... etc
});

并在处理程序中使用type 作为动态键：

const handleListChange = (e, type) => {
  setState(prevState => ({
    ...prevState,
    [type]: e.target.value;
  }));
};

这将使处理程序更加通用/通用。

我会 curry type 参数，这样您就不需要在匿名回调中代理事件对象。

const handleListChange = type => e => {
  setState(prevState => ({
    ...prevState,
    [type]: e.target.value;
  }));
};

...

<Component onChange={handleListChange(type)} />