React Native传递State中的Notes数据给子组件时提示Undefined的问题求助

你的问题出在两个关键细节上，咱们逐一拆解：

1. FlatList renderItem 的参数解构错误 #

FlatList 的 renderItem 回调函数接收的参数对象里，当前列表项对应的固定属性是 item，而不是你写的 note。你现在解构的是{ note }，自然拿不到任何数据，传给子组件的note就会是undefined。

2. NoteItem 组件缺少返回值 #

你的NoteItem是函数组件，但内部没有返回JSX元素，相当于默认返回了undefined——哪怕后续数据传对了，也看不到任何内容。

修正后的完整代码： #

import { useState, View, FlatList, Text } from 'react-native';

export default App = () => { 
  const [notes, setNotes] = useState([ 
    { key: 1, value: "Hello there what up", title: "Some Title for this" }, 
    { key: 2, value: "I want to take notes", title: "another for this one" }, 
  ]); 
  return ( 
    <View> 
      {/* 把 { note } 改成 { item }，再将 item 传给 note 属性 */}
      <FlatList 
        data={notes} 
        renderItem={({ item }) => ( 
          <View> 
            <NoteItem note={item} /> 
          </View> 
        )} 
      /> 
    </View> 
  ); 
}; 

// 加上return，或者用括号包裹JSX实现隐式返回
export default NoteItem = ({ note }) => { 
  return <Text>{note.title}</Text>; 
};

补充说明： #

• FlatList的renderItem参数结构是固定的，除了item，还有index、separators等属性，核心是必须通过item获取当前列表项。
• 如果不想写return，可以把JSX用圆括号包裹，利用箭头函数的隐式返回特性：

export default NoteItem = ({ note }) => ( 
  <Text>{note.title}</Text> 
);

效果和显式写return完全一致。

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