Reagieren Komponente Rendering vor Daten von localStorage

Question

Ich habe Schwierigkeiten bei der Implementierung eines Stücks React-Code, der Informationen von localStorage holt und rendert.

Ich habe eine Galerie von Thumbnail-Bildern (Komponenten), die bei einem Klick eine Funktion auslösen, die Informationen aus einer db für dieses bestimmte Bild holt und die Daten in localStorage speichert. Außerdem wird der Benutzer zur ShowTale-Komponente umgeleitet, wo Informationen zum Bild angezeigt werden.

class Tale extends Component { 

handleClick(){ 
    const pictureId = this.props._id; 
    this.props.fetchTale(pictureId); 
} 

render() { 
    const {_id, title, story, picture} = this.props; 
    return (
     <div className="col-md-2 col-sm-6"> 
      <div className="thumbnail"> 
       <img src={picture} /> 
       <div className="caption"> 
        <h4>{title}</h4> 
       </div> 
       <p> 
        <Link onClick={this.handleClick.bind(this)} to="showTale" className="btn btn-primary">More Info</Link> 
       </p> 
      </div> 
     </div> 
    ) 
} 
}; 

export default connect(null, actions)(Tale); 

stelle ich die Daten über die folgende Aktion:

export function fetchTale(id){ 
return function(dispatch){ 
    axios.get(`${ROOT_URL}/tale`, {params: {id: id}}).then(function(response) { 
     localStorage.setItem('fishTail', JSON.stringify(response.data)); 
    }) 
} 
}; 

Das Problem darin liegt, dass die ShowTale Komponente, wird unten, nicht die richtigen Daten zu machen. Sie gibt beim Starten der Anwendung die korrekten Daten der ersten Instanz wieder, aber bei nachfolgenden Anforderungen werden die vorherigen Daten gerendert. Zum Beispiel: Ich starte die App, klicke auf Bild 1 rendert 1, klicke auf Bild 2 rende 1, klicke auf Bild 3 rende 2, und so weiter. Die Daten von localStorage werden korrekt aktualisiert, aber es scheint, dass die Komponente die Daten von localStorage abfragt, bevor sie von der Aktion aktualisiert wird.

class ShowTale extends Component { 
constructor(props){ 
    super(props) 

    this.state = {tale: JSON.parse(localStorage.getItem('fishTail'))} 
} 

componentWillMount(){ 
    this.setState = JSON.parse(localStorage.getItem('fishTail')); 
} 

renderTale(){ 
    const tale = this.state.tale; 
    console.log('the tale: ', tale); 
    const {title, story, picture, author} = tale; 

    return (
     <div className="thumbnail"> 
      <img className="image-responsive" src={picture}/> 
      <div className="caption-full"> 
       <h4>{title}</h4> 
       <p>{story}</p> 
       <p><em>Submitted by: {author}</em></p> 
      </div> 
     </div> 
    ) 
} 

render() { 
    return(
     <div className="container showTale"> 
      <div className="row"> 
       <div className="col-sm-12"> 
        {this.renderTale()} 
       </div> 
      </div> 
     </div> 
    ) 
} 
}; 

export default ShowTale; 

Jegliche Unterstützung bei der Synchronisierung der Bilder mit den Daten in localStorage wird sehr geschätzt!

Answer 1

Ich benutze JSX, also kann das für Sie komisch aussehen. Sie können alle Elemente, die geändert werden müssen, in den Zustand Ihrer Eltern einfügen. Dann wird das Kind Komponente stumm sein und behandelt nur den Inhalt, wie sie von der Mutter Tale ändert Komponente Beispiel:

class Tale extends Component { 
// Parent Tale component handles fetching and setting state. 
constructor(props){ 
    super(props) 
    this.state = { 
     title:'', 
     story:'', 
     picture: Null, 
     author: '' 
    } 
} 

componentWillMount(){ 
    this.fetch_info() 
} 

fetch_info(){ 
    newObj = JSON.parse(localStorage.getItem('fishTail')) 
    setState({ 
    title: newObj.title, 
    story: newObj.story, 
    picture: newObj.picture, 
    author: newObj.title 
    }); 
} 

render() { 
    return(
     <div className="container showTale"> 
      <div className="row"> 
       <div className="col-sm-12"> 
        <ShowTale 
         title={this.state.title} 
         story={this.state.story} 
         picture={this.state.picture} 
         author={this.state.author} /> 
       </div> 
      </div> 
     </div> 
    ) 
    } 
}; 



class ShowTale extends Component { 
// Child ShowTale receives Props. 
constructor(props){ 
    super(props) 
} 

render(){ 
    <div className="thumbnail"> 
     <img className="image-responsive" src={this.props.picture}/> 
     <div className="caption-full"> 
      <h4>{this.props.title}</h4> 
      <p>{this.props.story}</p> 
      <p><em>Submitted by: {this.props.author}</em></p> 
     </div> 
    </div> 
} 

export default ShowTale; 

Wenn dies nicht funktioniert, sehen Sie in einer Funktion setState vorbei. Hier ist ein Beispiel aus der documentation.

Hoffe, dieses Beispiel hilft - Entschuldigung, es ist in JSX!