英文:
Flutter Hook useState not working with dropdown
问题
在选择下拉菜单的值后，useState中的值未更新。
这是我的模型类：
class Data {
final int id;
final String name;
final String someOtherData;
Data({
required this.id,
required this.name,
required this.someOtherData,
});
}
这是我的HookWidget：
class Demo extends HookWidget {
Demo({super.key});
final data = [
Data(id: 0, name: 'please pick one', someOtherData: 'no value'),
Data(id: 10, name: 'ten', someOtherData: 'tenten'),
Data(id: 20, name: 'twenty', someOtherData: 'twentytwenty'),
];
@override
Widget build(BuildContext context) {
final selectedIndex = useState(0);
final selectedData = useState(
data.where((element) => element.id == selectedIndex.value).first,
);
return Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
DropdownButton(
value: selectedIndex.value,
items: data
.map(
(e) => DropdownMenuItem(
value: e.id,
child: Text(
e.name,
),
),
)
.toList(),
onChanged: (value) => selectedIndex.value = value!,
),
Text(
selectedData.value.someOtherData,
),
],
);
}
}
selectedIndex的值正常工作，没有任何问题。问题出在selectedData，在更新下拉菜单后：
onChanged: (value) => selectedIndex.value = value!,
selectedIndex的值改变了，但selectedData的值一点也没变。请帮忙解决一下...
英文:
After choosing a value from dropdown, the value in useState does not update.
This is my model class
class Data {
final int id;
final String name;
final String someOtherData;
Data({
required this.id,
required this.name,
required this.someOtherData,
});
}
This is my HookWidget
class Demo extends HookWidget {
Demo({super.key});
final data = [
Data(id: 0, name: 'please pick one', someOtherData: 'no value'),
Data(id: 10, name: 'ten', someOtherData: 'tenten'),
Data(id: 20, name: 'twenty', someOtherData: 'twentytwenty'),
];
@override
Widget build(BuildContext context) {
final selectedIndex = useState(0);
final selectedData = useState(
data.where((element) => element.id == selectedIndex.value).first,
);
return Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
DropdownButton(
value: selectedIndex.value,
items: data
.map(
(e) => DropdownMenuItem(
value: e.id,
child: Text(
e.name,
),
),
)
.toList(),
onChanged: (value) => selectedIndex.value = value!,
),
Text(
selectedData.value.someOtherData,
),
],
);
}
}
Value of selectedIndex works fine, no problem at all. The problem is with selectedData, after updating the dropdown
onChanged: (value) => selectedIndex.value = value!,
selectedIndex value changed, but selectedData value doesn't change at all. Help please...
答案1
得分: 2
为什么你认为它必须改变？useState(<initialData>) 中的 initialData 在第一次调用时初始化了 ValueNotifier，并在后续调用中被忽略。换句话说，selectedData 的值不会自动订阅到 selectedIndex 的值 - 它们是独立的 ValueNotifier。
如果你想缓存一个值并基于其他值（依赖项）重新计算它，请使用 useMemoized 钩子，像这样：
final selectedIndex = useState(0);
final selectedData = useMemoized(
() => data[selectedIndex.value],
[selectedIndex.value]
);
英文:
Why do you think it must change? The initialData in useState(<initialData>) initializes the ValueNotifier on the first call and is ignored on subsequent calls. In other words, the value of selectedData is not automatically subscribed to the value of selectedIndex – they are separate ValueNotifier-s.
If you want to cache a value and recalculate it based on some other values (dependencies) use the useMemoized hook instead, like so:
final selectedIndex = useState(0);
final selectedData = useMemoized(
() => data[selectedIndex.value],
[selectedIndex.value]
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论