Question

在将数据传递给子组件时遇到问题。

import React, { Component } from 'react'
import { Text, View, ScrollView } from 'react-native'
import axios from 'axios'
import ClaimStatus from '../table/ClaimStatus'


export class ClaimsEW extends Component{

    render(){
        console.log(this.props.claim_approval_summary)
        return(
            <ScrollView>

                <View style={{elevation:5, backgroundColor:'#fff', margin:15}}>
                    <ClaimStatus newprops={this.props.claim_approval_summary} />
                </View>
            </ScrollView>
        )
    }
}


class ClaimsAMC extends Component{
    render(){
        return(
            <View>
                <Text>
                    class two
                </Text>
            </View>
        )
    }
}



export default class ClaimsLevelTwo extends Component {

    constructor(props) {
        super(props)

        this.state = {
            id: '',
            param_oem: '',
            dropdown_arg: '',
            claim_approval_regions: [],
            claim_approval_summary: [],
        }
    }

    async componentDidMount(){

        const param_oem = this.props.navigation.getParam('value');
        const auth_id = this.props.navigation.getParam('auth_token');
        const dropdown_arg = this.props.navigation.getParam('arg');


        await this.setState({
            param_oem,
            id: auth_id,
            dropdown_arg,
            fetched: true
        });


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

                axios.post('http://bi.servassure.net/api/ClaimApprovalSummary', {
                oem: this.state.param_oem,
            }, {headers:headers})
            .then(res => {

                let claim_approval_regions = res.data.region;
                let claim_approval_summary = res.data.data[0];



                this.setState({
                    claim_approval_regions :claim_approval_regions,
                    claim_approval_summary : claim_approval_summary
                });

                console.log(this.state.claim_approval_regions)
            }).catch(err => console.log(err));

    }
    render() {
        const state_values = this.state;
        console.log(state_values)
        return (
            (this.state.dropdown_arg === 'ew' ? (Object.keys(state_values).length > 0 ? <ClaimsEW {...state_values} /> : null) : <ClaimsAMC/>)
        )
    }
}

当我在类ClaimStatus newprops={this.props.claim_approval_summary} />中调用ClaimsEW组件时，道具变得不确定。我什至尝试在不使用新的子组件的情况下打印值，仅给出一个但仍然给出相同的结果。

如果我没有在类ClaimsEW中传递任何新的 Component 或 View ，则console.log(this.props.claim_approval_summary)将在控制台中打印道具值。调用ClaimStatus newprops={this.props.claim_approval_summary} />时，在以下组件中打印未定义的道具。

我要接收的数据是对象形式的，因此我将其转换为数组以进一步在<ClaimStatus/>组件中进行映射。

请帮助解决此问题。

Answer 1

快速解决方案：如果您进行this.props.newprops，则需要像console.log(this.props.newprops)一样呼叫<ClaimStatus newprops={this.props.claim_approval_summary} />

说明：

这样做<ClaimsEW {...state_values} />时，基本上是将每个状态值作为单独的prop键发送。因此变成<ClaimsEW claim_approval_regions={[]} and so on... />，这就是console.log(this.props.claim_approval_summary)工作时<ClaimsEW {...state_values} />起作用的原因。为了更好地理解这一点，我建议您深入了解javascript的对象分解功能。

发送道具的基本规则之一是<AnyComponent propOne={valueOne} propTwo={valueTwo} and so on.../>，它们在AnyComponent中以this.props.propOne，this.props.propTwo等形式出现，等等...

希望有帮助。干杯！

Answer 2

我认为更简洁的代码可以解决您的问题，我已经清除了其中的一部分，也许会有所帮助

import React, { Component } from 'react'
import { Text, View, ScrollView } from 'react-native'
import axios from 'axios'
import ClaimStatus from '../table/ClaimStatus'


export class ClaimsEW extends Component{
 render(){
    console.log(this.props.claim_approval_summary)
    return(
        <ScrollView>
            <View style={{elevation:5, backgroundColor:'#fff', margin:15}}>
                <ClaimStatus newprops={this.props.claim_approval_summary} />
            </View>
        </ScrollView>
    )
 }
}


class ClaimsAMC extends Component{
 render(){
    return(
        <View>
            <Text>
                class two
            </Text>
        </View>
    )
 }
}



export default class ClaimsLevelTwo extends Component {
 constructor(props) {
    super(props);
    this.state = {
        id: '',
        param_oem: '',
        dropdown_arg: '',
        claim_approval_regions: [],
        claim_approval_summary: [],
    }
 }

 async componentDidMount(){
  const { getParam } = this.props.navigation;
  const param_oem = getParam('value');
  const auth_id = getParam('auth_token');
  const dropdown_arg = getParam('arg');

  const headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'x-access-token',
        'x-access-token': auth_id
    };

    const result   =  await  axios.post('http://bi.servassure.net/api/ClaimApprovalSummary', {
            oem: param_oem,
        }, {headers:headers});


     const claim_approval_regions = res.data.region;
     const claim_approval_summary = res.data.data[0];

     this.setState({
          param_oem,
         id: auth_id,
            dropdown_arg,
            fetched: true,
             claim_approval_regions,
             claim_approval_summary,
        });


 }

 render() {
    const state_values = this.state;
   const { dropdown_arg } = state_values;
    return (
        // having dropdown_arg means the length is always > 0
        (dropdown_arg === 'ew' ? <ClaimsEW {...state_values} />) : <ClaimsAMC/>)
    )
 }
}

未在调用子组件上定义数据道具

2 个答案: