addingandremovingdataandcountingwithuseContext-React-Typescript
创始人
2024-07-26 16:31:18
0

使用useContext钩子函数实现在React中添加和删除数据,以及对数量进行计数。

  1. 创建并导出一个上下文对象:
import { createContext } from 'react';

export interface Data {
  id: number;
  name: string;
}

export interface ContextProps {
  data: Data[];
  addData: (name: string) => void;
  removeData: (id: number) => void;
  count: number;
}

export const AppContext = createContext({
  data: [],
  addData: () => {},
  removeData: () => {},
  count: 0,
});
  1. 创建一个包含数据和函数的提供程序,并引入上下文对象:
import React, { useState } from 'react';
import { AppContext, Data, ContextProps } from './AppContext';

interface Props {
  children: React.ReactNode;
}

const AppProvider = ({ children }: Props) => {
  const [data, setData] = useState([]);
  const [count, setCount] = useState(0);

  const addData = (name: string) => {
    const newData: Data = {
      id: data.length + 1,
      name,
    };

    setData([...data, newData]);
    setCount(count + 1);
  };

  const removeData = (id: number) => {
    const updatedData = data.filter(item => item.id !== id);
    setData(updatedData);
    setCount(count - 1);
  };

  const contextValue: ContextProps = {
    data,
    addData,
    removeData,
    count,
  };

  return (
    
      {children}
    
  );
};

export default AppProvider;
  1. 在应用程序中使用提供程序包装组件:
import React from 'react';
import AppProvider from './AppProvider';
import DataList from './DataList';
import DataForm from './DataForm';

const App = () => {
  return (
    
      

My App

); }; export default App;
  1. 在子组件中使用useContext钩子函数,来获取所需的数据和函数:
import React, { useContext } from 'react';
import { AppContext } from './AppContext';

const DataList = () => {
  const { data, removeData } = useContext(AppContext);

  return (
    
<

相关内容

热门资讯

安装apache-beam==... 出现此错误可能是因为用户的Python版本太低,而apache-beam==2.34.0需要更高的P...
避免在粘贴双引号时向VS 20... 在粘贴双引号时向VS 2022添加反斜杠的问题通常是由于编辑器的自动转义功能引起的。为了避免这个问题...
Android Recycle... 要在Android RecyclerView中实现滑动卡片效果,可以按照以下步骤进行操作:首先,在项...
omi系统和安卓系统哪个好,揭... OMI系统和安卓系统哪个好?这个问题就像是在问“苹果和橘子哪个更甜”,每个人都有自己的答案。今天,我...
原生ios和安卓系统,原生对比... 亲爱的读者们,你是否曾好奇过,为什么你的iPhone和安卓手机在操作体验上有着天壤之别?今天,就让我...
Android - 无法确定任... 这个错误通常发生在Android项目中,表示编译Debug版本的Java代码时出现了依赖关系问题。下...
Android - NDK 预... 在Android NDK的构建过程中,LOCAL_SRC_FILES只能包含一个项目。如果需要在ND...
Akka生成Actor问题 在Akka框架中,可以使用ActorSystem对象生成Actor。但是,当我们在Actor类中尝试...
Agora-RTC-React... 出现这个错误原因是因为在 React 组件中使用,import AgoraRTC from “ago...
Alertmanager在pr... 首先,在Prometheus配置文件中,确保Alertmanager URL已正确配置。例如:ale...