如何从FlatList向Search组件传递Props？解决TypeError报错

核心错误原因 #

1. 函数组件不能用this.state：你的Main是函数组件，不存在this上下文，直接写this.state.data必然会抛出Cannot read property 'data' of undefined错误。
2. 跨组件资源不可访问：renderItem、DATA都定义在Search组件内部，Main组件根本拿不到这些变量，导致FlatList的renderItem参数也是未定义状态。
3. 组件职责混乱：原本应该由父组件统一管理数据状态，你却把数据放在Search组件里，FlatList在Main里无法直接获取过滤后的数据。

修复方案：状态提升+职责分离 #

把数据状态、过滤逻辑移到Main组件，让Search只负责搜索输入的UI和触发搜索事件，实现组件间的数据流传递。

1. 修改Main组件（带状态的函数组件）

import React, { useState, useMemo } from 'react';
import { View, FlatList, Text } from 'react-native';
import Search from '../Components/Header';

// 原始数据移到这里，或单独抽成公共文件
const DATA = [
  { id: "1", title: "Data" },
  { id: "2", title: "Apple" },
  { id: "3", title: "Banana" }
];

// 列表项组件
const Item = ({ title }) => {
  return (
    <View style={{ padding: 12, borderBottomWidth: 1, borderColor: '#eee' }}>
      <Text>{title}</Text>
    </View>
  );
};

// 列表渲染函数
const renderItem = ({ item }) => <Item title={item.title} />;

function Main() {
  // 维护搜索值和原始数据
  const [searchValue, setSearchValue] = useState("");
  const [originalData] = useState(DATA);

  // 根据搜索值过滤数据，useMemo避免重复计算
  const filteredData = useMemo(() => {
    if (!searchValue.trim()) return originalData;
    const upperSearchText = searchValue.toUpperCase();
    return originalData.filter(item => 
      item.title.toUpperCase().includes(upperSearchText)
    );
  }, [searchValue, originalData]);

  // 传给Search的搜索回调
  const handleSearch = (text) => {
    setSearchValue(text);
  };

  return (
    <View style={{ flex: 1 }}>
      {/* 把搜索状态和回调传给Search组件 */}
      <Search searchValue={searchValue} onSearch={handleSearch} />
      <FlatList
        data={filteredData}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        style={{ borderColor: 'black', borderWidth: 1, flex: 1 }}
      />
    </View>
  );
}

export default Main;

2. 修改Search组件（纯UI组件）

import React from 'react';
import { View } from 'react-native';
import { SearchBar } from '@react-native-community/search-bar'; // 根据你实际使用的组件调整
import Headerstyles from './Headerstyles'; // 确保样式文件路径正确

// 改成类组件或函数组件都可以，这里用简洁的函数组件写法
export default function Search({ searchValue, onSearch }) {
  return (
    <View style={Headerstyles.rectangle}>
      <SearchBar
        value={searchValue}
        onChangeText={onSearch}
        placeholder="输入关键词搜索"
        clearButtonMode="always"
      />
    </View>
  );
}

// 如果坚持用类组件：
// export default class Search extends React.Component {
//   render() {
//     const { searchValue, onSearch } = this.props;
//     return (
//       <View style={Headerstyles.rectangle}>
//         <SearchBar
//           value={searchValue}
//           onChangeText={(text) => onSearch(text)}
//           placeholder="输入关键词搜索"
//         />
//       </View>
//     );
//   }
// }

关键修复点说明 #

• 移除Main组件中的this.state，改用React Hooks（useState+useMemo）管理状态和优化性能。
• 将共享的DATA、Item、renderItem移到Main组件（或公共文件），确保FlatList能直接访问。
• 让Search组件只做UI展示和触发搜索，数据状态和过滤逻辑交给父组件Main，实现清晰的数据流。
• 修复了原搜索逻辑中多余的)符号，改用includes方法让代码更直观。

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