ReactJS：配列にオブジェクトを回して、だから、

Question

をレンダリングし、私のコンポーネントは親コンポーネントからオブジェクトを受け取り、オブジェクトは次のようになります。私の子コンポーネントで

{ 
    _id: Data.now(), // MongoDB database 
    name: "", 
    description: "", 
    image: "images/image.jpg", 
    type: "image" 
} 

、私はこのデータを取得し、ANを作りたいですそれぞれの値を入力して値を変更し、新しいデータを保存することができます。

更新回答（ES6クラス）：

constructor(props) { 
    super(); 
    this.state = { 
    fieldGroups: [] 
    } 

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

componentWillMount() { 
    this.parseProps(this.props); 
} 

componentWillReceiveProps(nextProps) { 
    this.parseProps(nextProps); 
} 

parseProps(props) { 
    var fieldsArray = []; 
    var content = props.content; 
    Object.keys(content).map((field,index) => { 
    if (field === 'type') { 
     let fieldObj = {}; 
     fieldObj.field = field; 
     fieldObj.value = content[field]; 
     fieldObj.key = props.content._id + field; 
     fieldsArray.push(fieldObj); 
    } 
    }); 
    this.setState({ 
    fieldGroups: fieldsArray 
    }); 
} 

render() { 
    return (
    { 
     this.state.fieldGroups.map((field) => { 
     if (field.field === "type") { 
     return (html element specific to type) 
     } else { 
     return (a different html element) 
     } 
    }) 
    } 
) 
} 

は、だから今は、子コンポーネントがユーザーを表示するフィールドを決定させるという意味で、私の成分を分離することができます。ありがとうDanneManne

Answer 1

関数componentDidMountは、名前付きの指示と同様で、コンポーネントがマウントされた後に一度だけ呼び出されます。しかし、親コンポーネントが更新されたプロパティで子コンポーネントを再レンダリングしている場合、子はすでにマウントされており、その関数は再び呼び出されません。

注意すべきもう一つは、componentDidMountの目的は、あなたがoffsetWidthまたは別の要素のoffsetHeightのようなものを見たい場合は、実際のDOMからデータを取得できるということであるということですが、あなたがすべてでDOMを使用していない場合は、 DOMの追加操作を避けるためにはcomponentWillMountを使用する方がよいでしょう。これは、通常は最も時間がかかる部分です。

あなたが欠けているものは、componentWillReceivePropsと一緒に、componentWillMountの組み合わせの使用です。これは、親が子を再レンダリングするたびに呼び出される関数です。

constructor(props){ 
    super(); 
    this.parseProps = this.parseProps.bind(this); 
    } 

    componentWillMount() { 
    this.parseProps(this.props); 
    } 

    componentWillReceiveProps(nextProps) { 
    this.parseProps(nextProps); 
    } 

    // === Parsing Props 
    // 
    // Takes care of component specific adjustment of 
    // props that parent components does not need to 
    // know about. An example can be sorting or grouping 
    // of records. 
    // 
    parseProps(props) { 
    this.setState({ 
     // key: props.key 
    }); 
    } 

ですから、現在componentDidMountで持っているロジックがparseProps関数に移動することができます：私は普通に行く

パターンがあります。