Javascript React-调用子级时在父级中调用setState

我正在react中构建一个博客，从JSON-API获取数据并动态呈现。我在app.js中调用setState，通过axios从JSON获取数据，并使用match.params路由到帖子页面（child）。这很好，但是如果我在单独的窗口中调用子对象（URL:../blog/post1），它不会被渲染。如果我硬编码状态，它就会工作

那么，我明白了问题所在，解决问题的最佳方法是什么

家长：

class App extends Component {
  constructor(props) {
    super();
    this.state = {
      posts: []
    }

getPosts() {
  axios.get('APIURL')
  .then(res => {
    let data = res.data.posts;
    this.setState({
      posts: data
    })
  })
}

componentDidMount = () => this.getPosts()

儿童：

更新-发现错误： 组件抛出错误，因为道具为空。这是因为axios getData需要一些时间

解决方案：我添加了一个三元操作符来检查axios是否完成，并在加载时显示一个css微调器。所以组件中没有错误

动态路由就像一个charme

你可以用它来做这件事。您需要编写如下函数

setPosts(posts) {
  this.setState({posts});
}

在父级中，然后在父级中，将其绑定到构造函数中，如下所示

this.setPosts = this.setPosts.bind(this);

当您执行此操作时，您正在将setpost附加到父对象的范围，以便函数中提及的

this

都是指父对象的

this

，而不是子对象的

this

。然后，只需将函数向下传递给渲染中的子对象

<Child setPosts={this.setPosts} />

---

这也可以应用于

getPosts

方法，将其绑定到父类并传递给子类

当您点击

/blog/post1

url时，它仅呈现该页面。应用程序组件未加载。如果您从应用程序页面导航，则所有加载都已完成，并且post数据处于子组件的状态

---

请参考这个。这应该能回答你的问题

谢谢你的回答。问题是axios调用需要很长时间，所以我添加了一个三元运算符，并在加载时显示了一个css微调器。谢谢您的回答。动态路由就像一个charme。问题是axios调用花费的时间太长，组件抛出了一个erorr。解决方案：我添加了一个三元操作符来检查axios是否完成，并在加载时显示一个css微调器。所以组件中没有错误。

this.props.setPosts( /*post array goes here */ );