Question

我有一个Post类，它将根据参数动态显示数据库中每个帖子的内容。我的问题是我想使用状态，但是match.params id值唯一可用的时间是在render方法期间-由于无限循环，此时我无法使用set状态。作为一种变通方法，我使用局部变量，并且仅在match.params不为null时才在render中设置它们。但是我理想上想使用状态。

是否有一种方法可以在render方法之前获取该参数，以便我可以使用set状态？

已更新为显示代码：

这是我检查参数的地方，并将其与db中的帖子匹配：

render() {
  if(this.state.props.match) {
      post = this.props.data.posts.find(post => post.id == this.props.match.params.id );
  }
}

因为match.params仅在此阶段可用，所以当组件首次加载时我无法这样做，因为它将为null。

在该发布对象中，我有一个注释对象，我想再次指定但不能。因此，我要做的就是在发出POST请求时将其分配给状态（因此是方法而不是渲染）：

postComment = (e, postId, postComments) => {

        e.preventDefault();

        let data = {
            comment: this.state.comment,
            post_id: postId
        }

        if(this.state.comment != "") {
            axios.post('http://127.0.0.1:8000/api/post_comments', data)
            .then(response => {
                // handle success
                console.log(response);

                postComments.unshift(response.data);

                this.setState({
                    comments: postComments
                });
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        }

这意味着要显示评论，我必须将状态与发布中的评论对象进行比较。如果状态大于其他状态，即输入了一个新值，则映射该状态，否则映射其他状态，否则将不显示现有注释：

{
   this.state.comments > post.comments ?
   this.state.comments.map(comment =>
        <p key={comment.id}>{comment.comment}</p>
   )
   :
   post.comments.map(comment =>
         <p key={comment.id}>{comment.comment}</p>
   )
}

感觉有点混乱，在状态下处理一个数组会更干净。

this.state.props.match:

{path: "/blog/:id(\d+)", url: "/blog/2", isExact: true, params: {…}}
isExact: true
params: {id: "2"}
path: "/blog/:id(\d+)"
url: "/blog/2"}

因此，当单击帖子2（blog / 2）时，将打印上面的内容，单击3时，id将为3，依此类推

Answer 1

好的，所以我遇到了类似您的问题。通常，如果您的状态取决于道具，则可以尝试使用getDerivedStateFromProps。

  static getDerivedStateFromProps(props, state) {
    post = props.data.posts.find(post => post.id == props.match.params.id );
    if (post !== state.post) {
      //add your magic here
      return {
        //return a new state....this is like calling setState
      };
    }
    return null; // do nothing
  }

React.js-有没有一种方法可以在render（）方法之前获取props.match.params值？

1 个答案: