时间戳

首页 > 解决方案 > ReactNative 错误如果您打算呈现子集合，则对象作为反应子无效，请改用数组

reactjs - ReactNative 错误如果您打算呈现子集合，则对象作为反应子无效，请改用数组

问题描述

所以我有一个对象。例如 {'monday': 1, 'tuesday': 2} 我正在使用 props.getProductiveDay() 在用户登录当天获取更新的对象并且我想在水平条形图中呈现这些数据data 属性，但我得到了错误 Objects are not valid as react child use an array instead

 const HorizontalBarGraphComponent = (props) => {
        useEffect(() => {
            props.getProductiveDay()
        }, [])
    
        return (
            <HorizontalBarGraph
                data={[2, 3, 1, 2, 1, 2, 3]}
                labels={["Sat", "Fri", "Thurs", "Wed", "Tues", "Mon", "Sun"]}
                width={Dimensions.get("window").width - 70}
                height={220}
                barRadius={2}
                barWidthPercentage={0.4}
                barColor="rgb(105, 126, 240)"
                baseConfig={{
                    hasYAxisBackgroundLines: false,
                    xAxisLabelStyle: {
                        rotation: 0,
                        fontSize: 13,
                        width: 60,
                        yOffset: 4,
                        xOffset: -12,
                    },
                    hasYAxisLabels: false,
                }}
                style={{
                    // marginLeft: 20,
                    marginRight: 60,
                    marginTop: -60,
                    padding: 10,
                    // borderWidth: 1,
                    // borderColor: "#EEEEEE",
                    borderRadius: 10,
                    width: Dimensions.get("window").width - 150,
                    // backgroundColor: `#FAFAFA`,
                }}
            />
        )
    }
    
    const mapStateToProps = (state) => {
        return {
            productiveDay: state.productiveDayReducer,
        }
    }
    
    const mapDispatchToProps = (dispatch) => {
        return {
            getProductiveDay: () => dispatch(getProductiveDay()),
        }
    }
    
    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(HorizontalBarGraphComponent)

标签： reactjsreact-nativeexpo

解决方案

这是上述问题的减速器的动作广告

export const getProductiveDay = () => {
    return async (dispatch) => {
        const data = await AsyncStorage.getItem("productiveDay")
        const parse = JSON.parse(data)
        console.log("parse", parse)
        return dispatch({
            type: "FETCH_OVERALL_DISCIPLINE_LEVELS",
            data: parse,
        })
    }
}


const daysOfTheWeek = [
    {
        Monday: 1,
        Tuesday: 1,
        Wednesday: 1,
        Thursday: 1,
        Friday: 1,
        Saturday: 1,
        Sunday: 2,
    },
]


const productiveData = async (state) => {
    try {
        let json = JSON.stringify(state)
        await AsyncStorage.setItem("productiveDay", json)
    } catch (err) {
        console.log(err)
    }
}


const productiveDayReducer = (state = daysOfTheWeek, action) => {
    switch (action.type) {
        case "FETCH_OVERALL_DISCIPLINE_LEVELS":
            
            return action.data
        case "INCREASE_PRODUCTIVITY":
            // state[day] += 1
            productiveData(state)
            return state
        case "DECREASE_PRODUCTIVITY":
            // state[day] -= 1
            productiveData(state)
            return state
        default:
            return state
    }
}

export default productiveDayReducer

推荐阅读