我有一个组件,该组件在安装时获取数据,并将其传递给具有表以迭代该数据的子组件。在我的父组件中:
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>
)
}
我收到的数据格式为:
在我的子组件中:
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)}
请帮助纠正问题。
答案 0 :(得分:0)
是否有可能将this.state.dataSales初始化为空字符串“”?
问题可能是this.state.dataSales?true:false条件返回true,并且在接收到新道具时不会更新子组件