Question

我在实现从localStorage获取和呈现信息的React代码时遇到了困难。

我有一个缩略图（组件）库，只需单击一下，就会触发一个函数，该函数从数据库中获取该特定图片的信息并将数据存储在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，所以这看起来可能很奇怪。您可以将所有需要更改的元素放在父级的状态中。那么子组件将是哑的，只需处理内容，因为它从Tale父组件示例更改：

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中！

在从localStorage接收数据之前反应组件呈现

1 个答案: