javascript - 基本 React 应用程序中组件重新渲染的问题

Question

我正在构建一个基本的 React 应用程序，它从数组中呈现书籍列表，并具有将另一个书籍对象推送到数组上的表单。我认为修改 book 数组是对 props 的更改，这将导致 Post 组件重新渲染，但我无法让 Post 重新渲染，除非我通过点击链接并返回来强制它手动进行。我相信我已经附加了所有相关组件以及书籍数组。我使用 create-react-app 来设置 React 环境。 React 版本 - 15.4.1。非常感谢您提供的任何帮助!

编辑:我进行了一些重构并创建了一个 github 存储库以使一切变得更加清晰。

Github Repo

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, Route, IndexRoute, hashHistory} from 'react-router'

import App from './App'
import Display from './Display'
import Content from './Content'

//stylesheet
import './index.css'

//import posts array
import postsArray from './postsArray'

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Display} entries={postsArray}></IndexRoute>
      <Route path="view/:id" component={Content} entries={postsArray}></Route>
    </Route>
  </Router>,
  document.getElementById('root')
);

import React, {Component} from 'react'

import Post from './Post'


class Display extends Component {

  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(event) {
    this.props.route.entries.push({
      title: this.titleInput.value,
      author: this.authorInput.value,
      body: this.bodyText.value
    })
    event.preventDefault()
  }


  render() {
    return(
      <div>
        <Post entries={this.props.route.entries}/><br /> <br />
        <form onSubmit={this.handleSubmit}>
          <label>
            Title:<br />
            <input type={"text"} ref={(titleInput) => this.titleInput = titleInput}  className="input" />
          </label><br />
          <label>
            Author:<br />
            <input type="text" ref={(authorInput) => this.authorInput = authorInput} className="input" />
            </label> <br />
          <label>
            Body:<br />
            <textarea ref={(bodyText) => this.bodyText = bodyText} className="textAreaInput"/>
          </label> <br />
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

export default Display

import React, {Component} from 'react'
import {Link} from 'react-router'


class Post extends Component {
  constructor(props) {
    super(props)
    console.log("insinde post initial", this.props.entries)
  }
  render() {
    return (
      <div className="postsWrapper">
        {this.props.entries.map((entry, index) => (
          <div key={index} className="divMargin">
            <Link to={"view/" + index } className="postLink">
                <h1 className="postH titleFont">{entry.title}</h1>
                <h2 className="authorFont authorMargin">{entry.author}</h2>
            </Link>
          </div>
        ))}
      </div>
    )
  }
}

export default Post

var posts = [
  {
    title: "A Walk in the Woods",
    author: "Bill Bryson",
    body: "A very enjoyable book!"
  },
  {
    title: "Bridge Over The River Kwai",
    author: "Pierre Boulle",
    body: "I have never read this book. Not ever."
  },
  {
    title: "Do Not Sell at Any Price",
    author: "Amanda Petrusich",
    body: "Will you please please please give me this book when you're done?"
  },
  {
    title: "Just Kids",
    author: "Patti Smith",
    body: "This is a national book award winner! Wow!"
  }
]

export default posts

Answer 1

默认情况下，如果 props(在您的例子中是 posts 数组)发生变化，相关组件应该毫无问题地更新。

但是由于您的 Post 组件拒绝更新，我建议您使用 shouldComponentUpdate()进行检查，检查 Prop 是否相应更新。

shouldComponentUpdate 始终在渲染方法之前调用，并允许定义是否需要或可以跳过重新渲染。

一旦shouldComponentUpdate返回true，

componentWillUpdate就会被调用。不允许通过 this.setState 进行任何状态更改，因为此方法应严格用于为即将到来的更新做准备，而不是触发更新本身。

如果您不熟悉生命周期方法，请查看此 article .

根据你的情况，尝试一下

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.entries.length !== this.props.entries.length;
}

componentWillUpdate(nextProps, nextState) {
  // posts array did change, do something
}