前端问题_异步获取数据,useContext

异步获取数据

在使用useEffect异步获取数据,将异步函数独立出来

  const [mapInfo, setMapInfo] = useState<any>();
  useEffect(() => {
    const getData = async () => {
      const res = await getIndustryMapInfo(query.infoId);
      setMapInfo(res.data);
    };
    if (query.infoId) {
      getData();
    }
  }, []);

useContext

在父组件中包裹子组件,子级组件都可以通过useContext访问props

const appContext = React.createContext();
export default function App(){
    return(
       <appContext.Provider value={{name:"shi"}}>
        <Greeting />
       </appContext.Provider>
    );
}

function Greeting(){
    const greetingContext = useContext(appContext);
    return " name is " + greetingContext.name;         //name is shi
}

在输入框里加入文字点击

<Input
    value={mapData.parent_atlas_name}
    suffix={
        <Button
          style={{ width: '50px', height: '22px', padding: 0 }}
          type="link"
          onClick={() => {
          setJudgeNumber(1);
          setIsModalOpen(true);
          }}
        >  
    选择
</Button>
}
/>