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()进行检查，检查道具是否相应更新。

始终在render方法之前调用

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
}

Answer 2

我可以使用setState和.concat来修复此问题（并学习一些内容），而不是直接使用.push更改数组。最终的解决方案是：

this.setState({
  entries: this.state.entries.concat([{
    title: this.titleInput.value,
    author: this.authorInput.value,
    body: this.bodyText.value
  }])
})

如果感兴趣的话，实际的更改是在github repo中。

感谢@Stanley Luo在调试方面的帮助。

基本React应用程序

2 个答案: