localStorageから受け取ったデータの前に反応コンポーネントをレンダリングする

Question

localStorageから情報を取り出してレンダリングするリアクションコードを実装するのが難しいです。

私は、クリックするとその特定の画像のデータベースから情報を取り出し、localStorageにデータを保存する機能を起動するサムネイル画像（コンポーネント）のギャラリーを持っています。また、ユーザーをShowTaleコンポーネントにリダイレクトして、画像に関する情報を表示します。

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); 

私は、次のアクションを介してデータを設定します。

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)); 
    }) 
} 
}; 

を問題は、以下、ShowTaleコンポーネントたことにある正しいデータをレンダリングされません。アプリケーションの起動時に最初のインスタンスに正しいデータをレンダリングしますが、後続の要求では前のデータをレンダリングします。たとえば、私はアプリを起動し、画像1のレンダリング1をクリックし、画像2のレンダリング1をクリックし、画像3のレンダリング2をクリックします。 localStorageのデータは正しく更新されていますが、アクションによって更新される前にコンポーネントがlocalStorageからデータを取得しているようです。

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; 

写真がlocalStorageのデータと同期して表示されるように助けてください。

Answer 1

私はJSXを使用していますので、これはあなたに奇妙に見えるかもしれません。 親の状態で、変更が必要な要素をすべて配置することができます。そして、子コンポーネントは、ダムとなり、それが物語の親コンポーネントの例から変更としてだけでコンテンツを扱う：

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; 

これが動作しない場合は、SETSTATEに機能して渡して見てください。ここにはdocumentationの例があります。

希望すると、この例が役立ちます。申し訳ありませんがJSXにあります！