Question

我想从后端实现搜索并在前端TextInput中使用它。问题是我得到的是空白页，我真的不知道出什么问题了，我也尝试在控制台中读取错误，但不知道如何解决。我想说明一下，每次我调用作为依赖项的“文本”时，状态都会改变，并且它将使用新查询获取新数据。这样，每次用户在inputText中键入新数据时，它将自动获取。以下是我的代码：

console output

userSerarch.js

const express = require("express");
const router = express.Router();
const pool = require("../database");

router.get("/", (req, res) => {
  const text = req.query.text;
  let mysql = `SELECT * FROM users WHERE name='q'`;
  let query = pool.query(mysql, (err, results) => {
    if (err) throw err;
    res.send(JSON.stringify({ status: 200, error: null, response: results }));
  });
});

module.exports = router;

SearchComponent.js

function SearchComponent() {
  const [users, setUsers] = useState([]);
  const [text, setText] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios
      .get(`http://localhost:3000/api/users?q=${text}`)
      .then((res) => {
        const users = res.data;
        setUsers(users);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err);
      });
  }, [text]);

  const searchText = (text) => {
    setText(text);
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          onChangeText={(text) => searchText(text)}
          value={text}
          underlineColorAndroid="transparent"
          placeholder="Search"
        />
      </View>
      {isLoading ? (
        <Text>Loading.....</Text>
      ) : error ? (
        <Text>Something went wrong.....</Text>
      ) : (
        <FlatList
          data={users}
          keyExtractor={(item) => item.id.toString()}
          ItemSeparatorComponent={() => Separator()}
          renderItem={({ item }) => (
            <View style={styles.productItemContainer}>
              <View style={styles.productItemMetaContainer}>
                <Text>{item.id}</Text>
                <Text>{item.name}</Text>
                <Text> {item.age}</Text>
                <Text> {item.gender}</Text>
                <Text> {item.country}</Text>
              </View>
            </View>
          )}
        />
      )}
    </View>
  );
}

export default SearchComponent

如何实现从后端搜索并在fontend中使用它？

0 个答案: