Umi 请求数据,数据传递

971 阅读1分钟

1.引入请求工具并使用

`
import { postRequest } from './../../utils/http';

 // 获取大屏数据
  const getScreenData = async () => {
    const res = await  getScreenIndex({
      "brigadeName": props.location.query.data || '666旅',
    })
    const data = res && res.data;
     setDataTheme(data.dataTheme)
  };
  这里使用asyncawait 是异步请求,需要等待数据返回后才能设置状态,不然没有数据时页面会报错
`

2.父子组向子组件件传递数据

`
    //当传递的数据为一个数组时,可以通过这种方式
    <div className={styles.dataTrend}>
        <DataTrend dataHasten= {dataHasten} />
     </div>
     
     //当需要传递的数据为多组数据时,需要将其作为整个数组传下去
     <div className={styles.chartWrap}>
        <UnitRanking data= {[dataRank,dataBrigade]}/>
      </div>
`

3.子组件接收数据

` //子组件只为一个数组时,直接接收, const DataTrend = (props) => { console.log(props.dataHasten) useEffect(()=>{ //这里写你你需要展示的图表,因为这个数据源是通过接收的,要添加依赖 },[props]) } export default DataTrend;

//子组件为多个数组时
const UnitRanking = (...props) => { //需要对传过来的数组解构
    console.log(props[0].data[0]) //获取第一个数组的数据
    useEffect(()=>{},[props]) //同上
}
export default UnitRanking;

`