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

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/>)
        )
    }
}

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

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

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

请帮助解决这个问题。

Answer 1

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

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/>)
    )
 }
}

Answer 2

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

说明：

当您这样做<ClaimsEW {...state_values} /> 时，您基本上将每个状态值作为单独的道具键发送。所以这变成了 <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等等......

希望对您有所帮助。干杯！