Question

我正在建立一个博客，我从JSON-API获取数据并动态呈现它。我在我的app.js中调用setState来通过axios从JSON获取数据，并将match.params路由到post页面（childs）。这很好，但是如果我在一个单独的窗口中调用孩子（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-spinner。所以组件中没有错误。

动态路由就像魅力一样。

Answer 1

您可以使用binding执行此操作。你需要写一个像

这样的函数

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

在父级中，然后在父级中，将其绑定在构造函数中，就像这样。

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

执行此操作时，您将setPosts附加到父级的范围，以便函数中this的所有提及都引用父级this而不是子级this。 }。然后，您需要做的就是将函数传递给渲染中的子项

<Child setPosts={this.setPosts} />

并使用

访问子项中的该方法

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

这也适用于您的getPosts方法，将其绑定到父类并将其传递给Child。

Answer 2

当您点击/blog/post1网址时，它只会呈现该网页。未加载App组件。如果您从App页面导航，则所有加载都已完成，并且您拥有子组件状态的发布数据。

请参阅此SO question。这应该回答你的问题。

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

2 个答案: