Reagieren: Iterieren über Objekt, suchen Array und Anzeige Array-Elemente

Question

Ich versuche, über ein Objekt zu iterieren durch den Axios Aufruf an "/ Home/NewsNotes".

Antwort von Axios

Ich bin in der Lage auf den Bildschirm, um die Eigenschaftsnamen angezeigt werden, aber ich habe Probleme, die „NewsNotes“ Array zugreifen.

Hier ist mein Code für meine Komponente.

class ReleaseDetailsComponent extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     releaseNotes: {} 
    }; 
} 

componentDidMount() { 
    var _this = this; 
    const urlParams = new URLSearchParams(window.location.search); 
    const currCatId = urlParams.get('categoryId'); 
    axios.get('/Home/NewsNotes?categoryId=' + currCatId) 
     .then(response => _this.setState(
      { releaseNotes: response.data } 
     )) 
     .catch(function (error) { 
      console.log(error); 
     }); 
    console.log(currCatId); 
} 

render() { 
    return (
     <section> 
      <div className="row"> 
       <div className="col-sm-8 col-sm-offset-2 col-md-10 col-md-offset-1"> 
        <h2 className="page-title tutorials"><img className="title-icon" src="/Content/images/icons/icon-release-notes.png" /> News & Release Notes</h2> 
        <h3>{this.state.releaseNotes.Title}</h3> 
        {Object.keys(this.state.releaseNotes).map(function (item, key) { 
         return (
          <p>{item}</p> 
         ); 
        })} 
       </div> 
      </div> 
     </section> 
    ); 
    } 
} 

ReactDOM.render(
<ReleaseDetailsComponent />, 
document.getElementById('tutorialsWrapper') 
); 

Answer 1

Ich gehe davon aus, das Objekt, das Sie von URL abgerufen axios verwendet, wird wie folgt aussehen:

var releaseNotes = { 
    NewsNotes: [ 
     "Buy some milk": "data 1", 
     "Clean kitchen": "data 2", 
     "Watch Netflix": "data 3" 
    ], 
    NewsNotesCategoryId: 3, 
    SortOrder: null, 
    Title: "1.0.1", 
    TypeId: 2 
}; 

Als nächstes können Sie „dieses“ in der Karte Methode wie folgt, überprüfen Sie für jedes Kind Array injizieren, drücken Sie dann jede JSX Block in das temporäre Array, um später zurückzukehren:

{Object.keys(this.state.releaseNotes).map((key, idx) => { 
    var temp = []; 
    temp.push(<p>{key}</p>); 

    if (Array.isArray(this.state.releaseNotes[key])) { 
     this.state.releaseNotes[key].map(ckey => { 
      temp.push(<p>{ckey}</p>); 
     }); 
    } 

    return temp; 
}, this)} 

Answer 2

Sie können eine Reihe von Elementen mit den Tasten machen. Stattdessen mappen Sie über das Array und drucken sie so.

renderReleaseNotes() { 
    return _.map(this.state.releaseNotes, releaseNote => { 
    return (
     <p>releaseNote.title</p> 

    ); 
    }); 
} 

Hoffe das hilft. Glückliche Kodierung!