无法通过状态道具，说未定义答案

【问题标题】：Can't pass the state props, says undefined无法通过状态道具，说未定义
【发布时间】：2021-10-09 00:41:16
【问题描述】：

我一直在尝试将笔记数据传递给另一个组件，但我不知道为什么它说未定义。

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>
      <FlatList
        data={notes}
        renderItem={({ note }) => (
          <View>
            <NoteItem note={note} />
          </View>
        )}
      />
    </View>
  );
};

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

【问题讨论】：

标签： javascript reactjs react-native react-hooks

【解决方案1】：

首先假设 Flatlist 中的 renderItem 在其中有一个 'note' 属性。它没有，它被称为项目。你也传递了笔记，但你试图解构笔记？应该是这样的：

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>
      <FlatList
        data={notes}
        renderItem={({ item }) => (
          <View>
            <NoteItem note={item} />
          </View>
        )}
      />
    </View>
  );
};

【讨论】：

notes 不是问题，我已经修复了 item 问题。非常感谢。

【解决方案2】：

这种语法 - ({ note }) - 意味着 NoteItem 组件需要设置一个名为 note 的道具；但是，您正在设置 notes 属性。

试试这个：

<FlatList
   data={notes}
   renderItem={({ item, index }) => (
     <View key={index}>
       <NoteItem note={item} />
     </View>
   )}
/>

【讨论】：