Requisiten von untergeordneten Komponenten, die von JSON generiert wurden, können nicht aktualisiert werden

Question

Ich habe gerade angefangen, reagieren zu reagieren, und ich habe Probleme, den Status eines einzelnen untergeordneten Elements <Option /> zu aktualisieren.

Mein Flux-Speicher wird Änderung und in React Devtools kann ich den Status von StyleOptions-Element aktualisiert werden, aber es aktualisiert nicht die untergeordneten Komponenten <Option />.

Ich vermute, das liegt daran, dass ich die Liste der Optionen in einer Variablen gehalten habe.

Ich muss dies verwenden, weil ich diese Optionen aus JSON ziehe.

const Options = this.state.options.map((parent) => { 
     const children = parent.children.map((child) => { 
      return (
      <Option {...child} /> 
     ) 
     }); 
     return <Option {...parent} children={children} />; 
    }); 

Also ich denke, dieser Teil könnte Probleme verursachen.

Meine Beispieldaten von OptionsStore sieht so aus.

this.options = [ 
     { 
     key: "suitType", 
     label: "Suit Type", 
     selected: false, 
     children: [ 
      { 
      key: "suittype_skinny", 
      parent: "suitType", 
      label: "Skinny", 
      price: "£50", 
      description: "Short description", 
      images: { 
       general: "http://placehold.it/600x600", 
       closeUp: "http://placehold.it/620x620", 
       thumbnail: "http://placehold.it/100x100", 
      }, 
      selected: false, 
      }, 
      { 
      key: "suittype_wedding", 
      parent: "suitType", 
      label: "Wedding", 
      price: "£50", 
      description: "Short description", 
      images: { 
       general: "http://placehold.it/600x600", 
       closeUp: "http://placehold.it/620x620", 
       thumbnail: "http://placehold.it/100x100", 
      }, 
      selected: false, 
      } 
     ] 
     } 
    ] 

Auch die Kinderstützen werden nicht verändert.

Voll Code hier:

import React, { Component } from 'react'; 
import Option from './Option'; 
import OptionsStore from '../../stores/OptionsStore'; 

class StyleOptions extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     options: OptionsStore.getAllItems(), 
    } 
    } 
    componentDidMount() { 
    OptionsStore.on('change',(e) => { 
     this.setState({ 
     options: OptionsStore.getAllItems(), 
     }); 
     console.log('optionsStore received an update'); 
    }); 
    } 
    render() { 
    const Options = this.state.options.map((parent) => { 
     const children = parent.children.map((child) => { 
      return (
      <Option {...child} /> 
     ) 
     }); 
     return <Option {...parent} children={children} />; 
    }); 
    return(
     <div className="col-xs-6"> 
     <ul className="list-group"> 
      {Options} 
     </ul> 
     </div> 
    ) 
    } 
} 

export default StyleOptions; 

auch die <Option /> Code:

import React, { Component } from 'react'; 

export default class Option extends Component { 
    constructor(props) { 
    super(props); 
     this.hasChildren = this.props.children ? true : false; 
     this.hasThumb = this.props.images ? true : false; 
     this.children = this.state.children; 

    this.state = { 
     label: this.props.label, 
     description: this.props.description, 
     selected: false, 
     price: this.props.price 
    } 
    } 
    render() { 
    return (
     <li className={this.hasChildren ? 'list-group-item':'col-sm-4 list-group-item' } selected={this.state.selected}> 
      <a className="media"> 
      {this.hasThumb ? (
      <div className="media-left media-middle"> 
       <img src={this.props.images.thumbnail} alt={this.state.label} /> 
      </div> 
      ) : (
       ' ' 
      )} 
      <div className="media-body"> 
       <h4 className="option-name">{this.state.label}</h4> 
       <p className="info">{this.state.description}</p> 
       <span className="text-success pricing">{this.state.price}</span> 
      </div> 
      </a> 
      {this.hasChildren ? (
       <ul className="panel-body"> 
        {this.children} 
       </ul> 
      ) : (
       ' ' 
      )} 
     </li> 
    ) 
    } 
} 

ich jemand hoffen helfen könnte.

Answer 1

Das Problem liegt innerhalb Ihrer Option-Komponente. Sie definieren this.children = this.state.children. Danach definieren Sie Ihren Ausgangszustand, aber es gibt keine "Kinder". Damit ist der Kinderzustand nicht definiert.

Fügen Sie zuerst children: this.props.children in Ihren Status ein.

Ändern Sie dann

{this.hasChildren ? (
       <ul className="panel-body"> 
        {this.children} 
       </ul> 
      ) : (
       ' ' 
)} 

zu

{this.hasChildren ? (
      <ul className="panel-body"> 
       {this.state.children} 
      </ul> 
     ) : (
      ' ' 
)} 

und es besteht keine Notwendigkeit this.children = this.state.children zu definieren.

Ich hoffe, es löst das Problem.

Answer 2

Danke alireza für Ihre Hilfe.

Ich habe es geschafft, es zu beheben. Das Problem war, dass die <Option /> zu viele Informationen erhalten hat. Ich entfernte alle Staatsanrufe und ließ nur die if-Aussagen wie unten.

import React, { Component } from 'react'; 

export default class Option extends Component { 
    constructor(props) { 
    super(props); 
     this.hasChildren = this.props.children ? true : false; 
     this.hasThumb = this.props.images ? true : false; 
     //this.state = this.props; 
    } 
    render() { 
    return (
     <li className={this.hasChildren ? 'list-group-item':'col-sm-4 list-group-item' }> 
      <a className="media"> 
      {this.hasThumb ? (
      <div className="media-left media-middle"> 
       <img src={this.props.images.thumbnail} alt={this.props.label} /> 
      </div> 
      ) : (
       ' ' 
      )} 
      <div className="media-body"> 
       <h4 className="option-name">{this.props.label}</h4> 
       <p className="info">{this.props.description}</p> 
       <span className="text-success pricing">{this.props.price}</span> 
      </div> 
      </a> 
      {this.hasChildren ? (
       <ul className="panel-body"> 
        {this.props.children} 
       </ul> 
      ) : (
       ' ' 
      )} 
     </li> 
    ) 
    } 
} 

modifiziert Dann meine Stateful-Komponente <StyleOptions /> wie unten

import React, { Component } from 'react'; 
import Option from './Option'; 
import OptionsStore from '../../stores/OptionsStore'; 

class StyleOptions extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     options: OptionsStore.getAllItems(), 
    } 
    } 
    componentWillMount() { 
    OptionsStore.on("change",() => { 
     this.setState({ 
     options: OptionsStore.getAllItems(), 
     }); 
     console.log('optionsStore received an update'); 
    }); 
    } 
    render() { 
    const { options } = this.state; 
    const allOptions = options.map((option) => { 
     const { children } = option; 
     const optionChildren = children.map((child) => { 
      return <Option {...child} />; 
     }) 
     return <Option {...option} children={optionChildren} />; 
    }); 
    return(
     <div className="col-xs-12"> 
     <ul className="list-group"> 
      {allOptions} 
     </ul> 
     </div> 
    ) 
    } 
} 

export default StyleOptions; 

nicht sicher, warum es jetzt richtig funktioniert. Ich vermute, dass es sich geändert haben könnte, weil ich die Karten ein wenig modifiziert habe.

Alt ein/gebrochenes ein:

const Options = this.state.options.map((parent) => { 
     const children = parent.children.map((child) => { 
      return (
      <Option {...child} /> 
     ) 
     }); 
     return <Option {...parent} children={children} />; 
}); 

New one/Arbeits:

const { options } = this.state; 
    const allOptions = options.map((option) => { 
     const { children } = option; 
     const optionChildren = children.map((child) => { 
      return <Option {...child} />; 
     }) 
     return <Option {...option} children={optionChildren} />; 
    });