React Native FlatList无法渲染添加的值 控制台输出undefined问题排查

核心错误点 #

• FlatList的renderItem回调参数没有正确解构：renderItem接收的是一个包含item属性的包裹对象，你直接将入参当作数组条目调用字段，自然返回undefined
• 字段名不匹配：你的数组条目内不存在title字段，训练名称存储在exerciseName.exerciseName层级下
• 数字类型值未转换：defaultValue期望接收字符串类型参数，直接传入数字会触发类型不匹配警告

修正后的代码 #

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.exerciseName.exerciseName}</Text>
                      <TextInput
                        placeholder="sets"
                        keyboardType="numeric"
                        maxLength={3}
                        textAlign="center"
                        defaultValue={item.sets.toString()}
                      />
                      <TextInput
                        placeholder="reps"
                        keyboardType="numeric"
                        maxLength={3}
                        textAlign="center"
                        defaultValue={item.reps.toString()}
                      />
                      <TextInput
                        keyboardType="numeric"
                        maxLength={4}
                        textAlign="center"
                        defaultValue={item.weigth.toString()}
                      />
                </View>
              </View>
            )}
            keyExtractor={(item, index) => item.key.toString()}
          />
</Container>

补充说明 #

如果后续需要修改输入框内的数值，需要给每个TextInput绑定onChangeText回调，将修改后的值同步更新到state.sets对应的条目上，否则输入内容不会响应更新。

内容的提问来源于stack exchange，提问作者user13132748