无法将道具传递给子组件

时间:2019-06-26 12:41:59

标签: react-native axios

我有一个组件,该组件在安装时获取数据,并将其传递给具有表以迭代该数据的子组件。在我的父组件中:

state={
    dataSales: [],
}


componentDidMount(){


        var headers = {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Access-Control-Allow-Headers': 'x-access-token',
            'x-access-token': this.state.id
        }

        axios.post('http://b******************OEMLevel2', {
            oem:'all'
        }, 
        {headers: headers})
        .then((res) => {

            let sample = res.data.data[0]

              this.setState({

                dataSales: sample
            })

        })
        .catch(err => {
            console.log(err)
        });

    }

   render() {
    console.log(this.state.dataSales)
    return (
        <View>


                {this.state.dataSales ? <Table oeminfo={this.state.dataSales}/> : null}


        </View>
    )
}

我收到的数据格式为:

enter image description here

在我的子组件中:

export default class Table extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount(){
        console.log(this.props)
    }

    render() {
        return (
            <View style={{flexDirection:'row', justifyContent:'space-around'}}>

                    <View><Text>Group</Text></View>
                    <View><Text>Total Sales</Text></View>
                    <View><Text>Percentage Sales</Text></View>
            </View>
        )
    }
}

子组件中的控制台将空数组显示为:{oeminfo: Array(0)}

请帮助纠正问题。

1 个答案:

答案 0 :(得分:0)

是否有可能将this.state.dataSales初始化为空字符串“”?

问题可能是this.state.dataSales?true:false条件返回true,并且在接收到新道具时不会更新子组件