我已经见过这种模式几次了，我想知道这是否是一种最佳实践，或者是否有另一种方法。
考虑一个带有属性的下拉选择器组件：
interface SelectProps {
items: string[],
value: string | null,
onChange: (value: string) => void
}Select组件具有确定默认值的逻辑，以确定在默认值未设置或设置为不可用值时显示哪个选项。
if (!value || !items.includes(value)) {
const defaultOption = computeDefaultOption(items);
onChange(defaultOption);
}这是一个好的做法吗？
我在这种模式中看到的主要陷阱是相互竞争的二传手之间的冲突：
const [state, setState] = useState(null)
<Select items={itemSet1} value={state} onChange={setState} />
<Select items={itemSet2} value={state} onChange={setState} />如果itemSet1和itemSet2不具有相同的项，则这可能使得行为不可预测。
2条答案
按热度按时间bnl4lu3b1#
我从来没有见过这种模式，但如果你需要知道一个适当的值，这是有意义的，它确实 * 改变 * 毕竟，它设置了一个值以外的其他收到。
nhjlsmyf2#
建议不要在受控组件（如选择组件）中触发假更改。如果值由父组件控制，则应将其作为 prop 传递并在父组件中计算。
通过让Select组件确定默认值并触发伪更改，它可能会与其他setter发生冲突。如果Select组件的多个示例具有不同的项集，则可能会发生不可预知的行为。
相反，最好在父组件中完成默认值计算，并将其作为一个属性传递给Select组件，这样可以消除竞争setter之间的任何潜在冲突，并确保设置的值是真实的更改的结果。