React：新しい受信データを解析するライフサイクルフックはありますか？

Question

私はfirebaseから受け取ったデータを解析し、この新しいデータをコンポーネントに渡そうとしています。データは約束で非同期的に取り出されます。私が遭遇する問題は、componentDidMountを設定してそこのデータを解析する関数を呼び出したとしても、初めてレンダリングされないということです。

次のように私はfirebaseから受け取るデータは次のとおりです。

faults: [{ 
    name: "Foo", 
    status: "Open" 
    type: "type1" 
}, 
{ 
    name: "Bar", 
    status: "Open" 
    type: "type2" 
}], 
types: [{ 
    key: "type1", 
    type: "Accident" 
}, 
{ 
    key: "type2", 
    type: "Crash" 
}] 

あなたは私がtypesから正しい名前で障害のtypeを置き換えるために、データを解析する必要が見ることができるように。

そうするために、データを解析して状態を設定する関数があります。これは、そのためのコードである：

parseFields() { 
    let parsedFields = []; 
    this.props.fields.forEach((field) => { 
     const typeSelected= this.props.estados.find(element => element.key === field.type) || ''; 

     let parsedField = Object.assign({}, field); 

     parsedField['type'] = typeSelected.type; 

     parsedFields.push(parsedField); 
    }); 
    this.setState({data: parsedFields}); 
    } 

この関数はcomponentDidMount上及びcomponentWillReceivePropsで呼び出されるが、コンポーネントマウントデータは示されていない場合。しかし、コンポーネントが新しい小道具を受け取ると、それは正しく表示されます。

何か間違っていますか？私はcomponentWillMountでもこの関数を呼び出そうとしましたが、最初のレンダリングでは機能しません。

更新

としては、これはコンポーネントコードで要求された：

import React from 'react' 

import Table from './Table'; 

class FaultList extends React.Component { 
    constructor(props) { 
    super(props); 

    this.columns = [ 
     { 
     name: 'Name', 
     field: 'name' 
     }, 
     { 
     name: 'Type', 
     field: 'type' 
     }, 
     { 
     name: 'Status', 
     field: 'status' 
     } 
    ]; 

    this.state = { 
     faults: [] 
    }; 

    this.parseFields = this.parseFields.bind(this); 
    } 

    parseFields() { 
    let parsedFields = []; 
    this.props.fields.forEach((field) => { 
     const typeSelected= this.props.types.find(element => element.key === field.type) || ''; 

     let parsedField = Object.assign({}, field); 

     parsedField['type'] = typeSelected.type; 

     parsedFields.push(parsedField); 
    }); 
    this.setState({data: parsedFields}); 
    } 

    componentDidMount() { 
    this.parseFields(); 
    } 

    componentWillReceiveProps() { 
    this.parseFields(); 
    } 

    render() { 
    return(
     <Table 
     data={this.state.faults} 
     columns={this.columns} 
     handleClick={this.props.handleClick} 
     /> 
    ); 
    } 
} 

export default FaultList; 

これは、親コンポーネントで処理されたデータ取り込み処理を担当コードである：

componentDidMount() { 
    this.faultsRef= ref.child('faults'); 

    this.faultsRef.on('value', (snap) => { 
     let faults= []; 
     snap.forEach((child) => { 
     let fault= child.val(); 
     let key = child.key; 
     const finalFault = update(fault, {$merge: {key}}); 
     faults.push(finalFault); 
     }); 
     this.setState({faults}); 
    }); 

    get('types') 
    .then((types) => { 
     this.setState({types}); 
    }); 
    } 

get関数のコードは次のとおりです。

function get(node) { 
    return ref.child(node).once('value') 
    .then((snap) => { 
    let list = []; 

    snap.forEach((child) => { 
     let object = child.val(); 
     let key = child.key; 
     const finalObject = update(object , {$merge: {key}}); 
     list .push(finalObject); 
    }); 

    return list; 
    }); 
} 

更新2：

私は非常に奇妙な何かに気づいた。親コンポーネントの'componentDidMount 'で少しのコードを並べ替えると、最初に型のリストを取得してフォールトのリストを取得すると、最初の再レンダリングは正しく行われますが、型は解析されないため、私のテーブルに空のセルが残っていました。

Answer 1

、FaultListは非同期に何かをし、単に親から小道具を受信しません。それで、FaultListをステートレスにして、renderのデータを直接構文解析するだけで、単純化することができます。コンポーネントが新しい小道具を受け取ると、コンポーネントは再レンダリングされます（つまり、renderが呼び出され、データが再解析されます）。

class FaultList extends React.Component { 
    constructor(props) { 
    super(props); 

    this.columns = [ 
     ... 
    ]; 

    this.parseFields = this.parseFields.bind(this); 
    } 

    // You no longer need `componentDidMount` and `componentWillReceiveProps` 

    parseFields() { 
    let parsedFields = []; 
    this.props.fields.forEach((field) => { 
     const typeSelected= this.props.types.find(element => element.key === field.type) || ''; 

     let parsedField = Object.assign({}, field); 
     parsedField['type'] = typeSelected.type; 
     parsedFields.push(parsedField); 
    }); 

    // Note: we are now returning the value instead of setting `state`. 
    return parsedFields; 
    } 

    render() {   
    return(
     <Table 
     data={this.parseFields()} 
     columns={this.columns} 
     handleClick={this.props.handleClick} 
     /> 
    ); 
    } 
} 

export default FaultList; 

Answer 2

私はあなたのTableコンポーネントの代わりに、this.state.faultsにthis.state.dataを使うべきだと思う：私が正しくあなたのコンポーネントを理解していた場合

<Table 
    data={this.state.data} 
    columns={this.columns} 
    handleClick={this.props.handleClick} 
    /> 

Answer 3

問題が何かを発見しました。 Bartekが述べているように、テーブルコンポーネントにはステータスの参照が必要なので、parseFieldsを親コンポーネントに移動してfirebaseが新しいデータを取得するたびに呼び出すだけです。これはそのコードです：

class FaultsView extends React.Component { 
    constructor(props) { 
    super(props); 

    this.faultsRef = null; 

    this.state = { 
     faults: [], 
     parsedFaults: [], 
     types: [] 
    }; 

    this.parseFields = this.parseFields.bind(this); 
    } 

    componentDidMount() { 
    get('types') 
    .then((types) => { 
     this.setState({types}); 
    }); 

    this.faultsRef = ref.child('faults'); 

    this.faultsRef.on('value', (snap) => { 
     let faults= []; 
     snap.forEach((child) => { 
     let fault= child.val(); 
     let key = child.key; 
     const finalFault = update(fault, {$merge: {key}}); 
     faults.push(finalFault); 
     }); 
     this.setState({faults}); 
     // This was the fix! 
     this.parseFields(); 
    }); 
    } 

    componentWillUnMount() { 
    this.faultsRef.off(); 
    } 

    parseFields() { 
    let parsedFields = []; 
    this.props.fields.forEach((field) => { 
     const typeSelected= this.props.types.find(element => element.key === field.type) || ''; 

     let parsedField = Object.assign({}, field); 

     parsedField['type'] = typeSelected.type; 

     parsedFields.push(parsedField); 
    }); 
    this.setState({data: parsedFields}); 
    } 

    render() { 
    return (
     <div> 
     <FaultList 
      faults={this.state.parsedFaults} 
      handleClick={this.handleClick}/> 
     </div> 
    ); 
    } 
} 

export default FaultsView;