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)
};
这里使用async 和await 是异步请求,需要等待数据返回后才能设置状态,不然没有数据时页面会报错
`
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;
`