目的是：每隔一秒钟数字递减
但是在实现的时候出现了一个问题，setInterval产生多个定时
解决方法：将timer定义在外面，每render一次删除定时起，防止多个定时器的产生。

import { useState , useEffect} from "react";
let timer = null;
function useCountdown(initialCount) {
    const [time, setTime] = useState(initialCount);
    timer = setInterval(() => {
        setTime(time - 1);
    }, 1000);
    if (time <= 0) {
        clearInterval(timer);
        alert('结束')
    return time;
  export default function App() {
    clearInterval(timer);
    const time = useCountdown(10);
    return (
        <h1>Hello CodeSandbox</h1>
        <h2>{time}</h2>
                    目的是：每隔一秒钟数字递减但是在实现的时候出现了一个问题，setInterval产生多个定时解决方法：将timer定义在外面，每render一次删除定时起，防止多个定时器的产生。import { useState , useEffect} from "react";let timer = null;function useCountdown(initialCount) {    const [time, setTime] = useState(initialCount);    timer
欢迎来到React-HOOK-useState篇
useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象，并且useState 不会自动合并更新对象。
const[state,setState]=setState(initialState);
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState)
				
最近在自己的react项目中使用到了setInterval，不过由于种种原因出现很多bug，在这里总结一下
点击一个开关后在间隔固定的时间段内连续发送请求，获取新的数据，关闭开关后就关闭定时器，不在发送请求，说到这里很多人大脑中应该都有了对应的解决方案了，我当时也是有自己的解决方案了，可是在实际写的过程中却遇到不少的问题
当时我是根据一个state状态来判断开启与关闭定时器，所以有了以...
接触 React Hooks 一定时间的你，也许会碰到一个神奇的问题: setInterval 用起来没你想的简单。
Ryan Florence 在他的推文里面说到：
不少朋友跟我提起，setInterval 和 hooks 一起用的时候，有种蛋蛋的忧伤。
老实说，这些朋友也不是胡扯。刚开...
```tsx
import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';
import axios from 'axios';
interface SearchComponentProps {
  onSearch: (searchTerm: string) => void;
const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const handleSearch = async () => {
    try {
      const response = await axios.get(`https://api.example.com/search?term=${searchTerm}`);
      // 在这里处理查询结果
      console.log(response.data);
      onSearch(searchTerm);
    } catch (error) {
      // 处理错误情况
      console.error(error);
  return (
      <TextInput
        value={searchTerm}
        onChangeText={(text) => setSearchTerm(text)}
      <Button title="Search" onPress={handleSearch} />
    </View>
export default SearchComponent;
3. 在父组件中使用查询组件并处理查询逻辑。
```tsx
import React from 'react';
import { View, Text } from 'react-native';
import SearchComponent from './SearchComponent';
const ParentComponent: React.FC = () => {
  const handleSearch = (searchTerm: string) => {
    // 在这里处理查询逻辑，可以更新状态或进行其他操作
    console.log('查询关键词:', searchTerm);
  return (
      <Text>查询功能示例</Text>
      <SearchComponent onSearch={handleSearch} />
    </View>
export default ParentComponent;
4. 在应用的入口文件中渲染父组件。
```tsx
import React from 'react';
import { AppRegistry } from 'react-native';
import ParentComponent from './ParentComponent';
const App: React.FC = () => {
  return <ParentComponent />;
AppRegistry.registerComponent('MyApp', () => App);
以上是一个简单的查询功能的实现示例，你可以根据实际需求进行相应的修改和扩展。记得根据你的项目需要进行网络请求的配置，例如设置请求头、身份验证等。