如何使用搜索文本输入（expo、react-native）在屏幕上显示项目

Posted 2023-04-18

【中文标题】如何使用搜索文本输入（expo、react-native）在屏幕上显示项目

【英文标题】：How to display items on screen using search textinput (expo, react-native)

【发布时间】：2020-09-25 15:14:18

【问题描述】：

我正在使用 react native 和 expo。我在屏幕（ios）模拟器上有一些从 API 获取的 JSON 数据。在顶部，我有一个搜索栏，用户可以在其中搜索屏幕上显示的数据。

例如，如果数据是

一个

一家公司

B

公司

A 是公司符号，a company 是符号名称。因此，当用户输入 A 时，它应该显示 A company，如果用户输入 Z，它应该显示 Z company。

我的代码：

import React,  useState, useEffect  from "react";
import 
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Keyboard,
  FlatList,
  TextInput,
  Button,
  Text,
 from "react-native";
import  useStocksContext  from "../contexts/StocksContext";
import  scaleSize  from "../constants/Layout";
import  Ionicons  from "@expo/vector-icons";

import  ListItem  from "react-native";

export default function SearchScreen( navigation ) 
  const  ServerURL, addToWatchlist  = useStocksContext();

  const [state, setState] = useState(
    /*  initial state here */
    myListData: [],
    search: "",
  );

  useEffect(() => 
    renderWithData();
    // FixMe: fetch symbol names from the servner and save in local SearchScreen state
  , []);

  updateSearch = (event) => 
    setState( search: event.target.value );
  ;

  renderWithData = () => 
    return fetch("http://131.181.190.87:3001/all")
      .then((res) => res.json())
      .then((json) => 
        setState(
          isLoaded: true,
          myListData: json,
        );
        setTimeout(() => 
          console.log(state.myListData);
        , 10000);
      );
  ;
  let filteredItems = state.myListData.filter((item) => 
    return (
      item.symbol.toUpperCase().indexOf(state.search.toUpperCase()) !== -1 ||
      item.name.indexOf(state.search) !== -1
    );
  );

  let movies = state.myListData.filteredItems.map((val) => 
    return (
      <View key=val.symbol style=styles.text>
        <Text style=styles.text>val.symbol</Text>
        <Text style=styles.text>val.name</Text>
      </View>
    );
  );

  return (
    <TouchableWithoutFeedback onPress=Keyboard.dismiss>
      <View style=styles.container>
        <TextInput
          style=styles.textinput
          placeholder="Search here"
          placeholderTextColor="white"
          value=state.search
          onChange=updateSearch.bind()
        />

        <Text>csdn</Text>
        <View style=styles.text>movies</View>
      </View>
    </TouchableWithoutFeedback>
  );


const styles = StyleSheet.create(
  textinput: 
    color: "white",
    height: "20",
    fontSize: 18,
  ,
  text: 
    color: "white",
    backgroundColor: "black",
  ,
  flatstuff: 
    color: "white",
  ,

  // use scaleSize(x) to adjust sizes for small/large screens
);

我不知道我做错了什么，但是如果我在 textinput 上输入了一些东西，它不会显示任何东西（更像是搜索不工作）并且我的数据仍然显示在屏幕上，除非我不能' t 使用文本输入搜索它。有人可以帮我吗？

编辑：json数据

对象

"name": "Chesapeake Energy",
"symbol": "CHK",

, 对象

"name": "C. H. Robinson Worldwide",
"symbol": "CHRW",

,

【参考方案1】：

你应该在 React-Native 中使用如下文本输入

 <TextInput
      style=styles.textinput
      placeholder="Search here"
      placeholderTextColor="white"
      value=state.search
      onChangeText=text=>updateSearch(text)
    />

你应该使用 onChangeText 并且 updateSearch 应该像下面这样改变

updateSearch = (text) => 
    setState( search: text );
  ;

更新

这就是你的整个组件应该是什么样子的，你可以试试看

function SearchScreen( navigation ) 
  const  ServerURL, addToWatchlist  = useStocksContext();

  const [state, setState] = useState(
    /*  initial state here */
    myListData: [],
  );
  const [search, setSearch] = useState('');

  useEffect(() => 
    renderWithData();
    // FixMe: fetch symbol names from the servner and save in local SearchScreen state
  , []);

  const updateSearch = (text) => 
    setSearch(text);
  ;

  renderWithData = () => 
    return fetch('http://131.181.190.87:3001/all')
      .then((res) => res.json())
      .then((json) => 
        setState(
          isLoaded: true,
          myListData: json,
        );
        setTimeout(() => 
          console.log(state.myListData);
        , 10000);
      );
  ;

  let filteredItems = state.myListData.filter((item) => 
    return (
      item.symbol.toUpperCase().indexOf(search.toUpperCase()) !== -1 ||
      item.name.indexOf(search) !== -1
    );
  );

  let movies = filteredItems.map((val) => 
    return (
      <View key=val.symbol style=styles.text>
        <Text style=styles.text>val.symbol</Text>
        <Text style=styles.text>val.name</Text>
      </View>
    );
  );

  return (
    <TouchableWithoutFeedback onPress=Keyboard.dismiss>
      <View style=styles.container>
        <TextInput
          style=styles.textinput
          placeholder="Search here"
          placeholderTextColor="white"
          value=search
          onChangeText=(text) => updateSearch(text)
        />

        <Text>csdn</Text>
        <View style=styles.text>movies</View>
      </View>
    </TouchableWithoutFeedback>
  );

【讨论】：

没有。它不会更新任何值。数据仍显示在屏幕上，但当我搜索时，它不会搜索我输入的特定字母。

你能把 let movies = state.myListData.filteredItems.map 改成 let movies = filteredItems.map 试试吗？

你能分享你的api的响应对象吗？

您的意思是显示我的刺激器的屏幕截图以便您知道它在显示什么？

你能显示console.log(state.myListData)的输出吗？至少一个对象，以便我可以重现该问题？