Flatlist 不添加值 React Native

Question

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() 时没有显示任何值它只是在终端中说未定义

Answer 1

您需要解构 renderItem function 的参数，因为它是一个带有item字段的 object：

renderItem={({item}) => (

我还建议从 JSX 中提取 function 以提高渲染性能。