javascript - Flatlist 不添加值 React Native
问题描述
export class mondayExercises extends Component {
constructor(props) {
super(props);
this.state = {
sets: [],
};
}
static getDerivedStateFromProps(props, state) {
if (props.route.params?.set) {
return {
sets: [...state.sets, props.route.params.set],
};
}
return null;
}
render() {
return (
<Container>
<FlatList
data={this.state.sets}
renderItem={(item) => (
<View style={{ padding: "5%" }}>
<View>
<Text>{item.title}</Text>
<TextInput
placeholder="sets"
keyboardType="numeric"
maxLength={3}
textAlign="center"
defaultValue={item.sets}<--------
/>
<TextInput
placeholder="reps"
keyboardType="numeric"
maxLength={3}
textAlign="center"
defaultValue={item.reps}<------------
/>
<TextInput
keyboardType="numeric"
maxLength={4}
textAlign="center"
defaultValue={item.weigth}<----------
/>
</View>
</View>
)}
keyExtractor={(item, index) => item.key.toString()}
/>
</Container>
数组示例
Array [
Object {
"exerciseName": Object {
"exerciseName": "Barbell Bench Press",
},
"key": 0.7455255006925475,
"reps": 0,
"sets": 0,
"weigth": 0,
},
你好,我现在正在学习在 React Native 中做 Faltlists,我正在尝试在上面的 Flatlist 中显示数组列表中的项目,但是当我插入 console.log() 时没有显示任何值它只是在终端中说未定义
解决方案
您需要解构 renderItem 函数的参数,因为它是一个带有item
字段的对象:
renderItem={({item}) => (
我还建议从 JSX 中提取该函数以提高渲染性能。
推荐阅读
- google-sheets - 无法使用具有空值的 Google Sheet Api V4 统一附加
- corda - 在 Corda 中,迁移到 Enterprise 时解析 master.changelog.json 时出错
- c# - 绑定到 IEditableObject 时是否经常遇到 WPF 中的错误?
- matlab - MATLAB中长度不等的多个箱线图
- python - Pandas 使用 nan 访问行
- c++ - C++ gdi::Bitmap 到内存中的 PNG 图像
- javascript - Javascript 写入文件系统
- cross-browser - 让 Polymer 3.0 元素向后兼容 IE11 和 Firefox 56?
- sql - Oracle 错误 (36,14): PL/SQL: ORA-22905: 无法访问非嵌套表项中的行
- android - 不兼容的类型:getFragmentManager 不起作用