javascript - 已解决：错误：元素类型无效...得到：未定义。检查“发现”的渲染方法

Question

来自纱线 ios 显示的完整错误

更新：我通过注释掉整个 Ionicon 部分解决了这个错误。现在我有一个内存泄漏错误，现在没有图像可供搜索，但这个问题得到了回答！

我正在尝试创建一个搜索栏，它会在您搜索后显示结果（个人资料列表），例如 Instagram。我收到此错误，我已确保索引文件导出 Discover。当我尝试单击选项卡栏的发现选项卡并尝试运行此代码时，会出现问题。我使用“SearchStore”是因为我在使用 setSearch 和 useState 时遇到了问题，因为挂钩错误（我已修复），这是我得到的解决方案，它使用 mobx 注入数据。我无法解决这个渲染问题，似乎我尝试的一切都会导致其他错误。

我真的很感激任何帮助，因为我是 javascript/react native 的新手，这让我很生气。如果您需要任何其他代码片段，例如路由文件或选项卡条形码，我会提供，请告诉我。

这是 Discover.tsx

import React, { useState } from 'react'; 
import Ionicons from 'react-native-vector-icons';
import { Container, Search, Header, Input } from './styles';
import { TypedComponent } from '../../Components';
import { SearchStore } from '../../Stores/Search';
import { hoc } from '../../Modules';

//export const Discover: React.FC = () => {
@hoc("search")
export class Discover extends TypedComponent<{search?: SearchStore;}> {
  render() {
    const { search, lang } = this.props;
    //const { search } = this.props;
    const str = lang.str.search;
    //const [search, setSearch] = useState('');
    return (
      <Container>
        <Header>
          <Search>
            <Ionicons
              name="search1"
              style={{
                  paddingRight: 10,
              }} 
              size={18} color="#838383" />
          <Input
              placeholder="Search"
              //value={search}
              value={search.editingSearch}
              returnKeyType="search"
              onChangeText={search.onSearchEdit}
              //onChangeText={text => setSearch(text)}
            />
          </Search>
        </Header>
      </Container>
    );
  }
}

export default Discover;

这是发现使用的 style.ts：

import { getStatusBarHeight } from 'react-native-status-bar-height';

import styled from 'styled-components/native';

export const Container = styled.View.attrs({
  paddingTop: getStatusBarHeight(),
})`
  flex: 1;
  background: #fff;
`;

export const Header = styled.View`
  margin: 10px;
  margin-right: 15px;
  flex-direction: row;
  align-items: center;
`;

export const Search = styled.View`
  flex: 1;
  border-radius: 5px;
  align-items: center;
  padding: 10px 15px;
  margin-right: 15px;
  background: #ececec;
  flex-direction: row;
`;
export const Input = styled.TextInput`
  flex: 1;
  font-size: 16px;
`;

标签： javascriptreactjstypescriptreact-nativemobx-react