Question

我有一个过滤用户和帖子的React应用程序。我的导航栏可以链接到用户，帖子。

点击帖子会显示所有用户发布的每个帖子的列表（每个帖子都有一些额外的元信息）。

这是我的帖子组件：

export default class Posts extends Component {
   render() {
      return (
         <div>
            {this.props.posts.map( post =>
               <Post {...this.props} post={post} key={post.id} />
            )}
         </div>
      )
   }
}

在用户页面上，每个用户都有一个子链接帖子。我想要的是能够点击该用户的帖子并将其带到帖子页面（如上所述），但只列出该用户的帖子。

posts数组看起来有点像这样：

[
  { id: 1,
   userId: 1 
  },
  { id: 2,
   userId: 1 
  },
  { id: 3,
   userId: 2 
  },
  { id: 4,
   userId: 3 
  },
  { id: 5,
   userId: 3 
  }
]

假设我点击了userId 3 userId的用户，并且只想显示他/她的帖子。做这个的最好方式是什么？

我知道我可以使用react-router将render() { const {userId} = this.props.params if(userId) { const postsForUser = posts.filter( post => post.userId === userId ) return ( <div> {postsForUser.map( post => <Post {...this.props} post={post} key={post.id} /> )} </div> ) } else { return ( <div> {this.props.posts.map( post => <Post {...this.props} post={post} key={post.id} /> )} </div> ) } } // end render()传递给URL，然后将其拉回到组件中，但是一旦Posts组件呈现，我不确定如何使用它。最终我希望它将posts数组过滤到userId route param，否则渲染所有帖子。这是正确的做法吗？

任何帮助表示感谢。

UPDATE：

好的，我知道这不是一个优雅的解决方案，但我想从一个解决方案开始，然后我会'减少'，可以这么说。

此代码中存在一个我无法弄清楚的错误：

userId

当我记录this.props.params.userId时，它会正确记录我刚刚点击的用户ID，因此我的postsForUser变量工作正常。

如果我用硬编码的整数定义const postsForUser = posts.filter( post => post.userId === 3 )，例如

postsForUser

它正确返回已过滤的数组。

所以在这一点上似乎一切正常，除非我换掉变量的硬编码id，this.props.params.userId返回一个空数组。

我哪里错了？

更新2（修复）：

对于遇到此问题的任何人，我错误地将parseInt()中的ID作为字符串返回，因此我必须使用const userId = parseInt(this.props.params.userId)来定义它，如下所示：

try { System.out.println("TEST"); con = (HttpURLConnection) new URL("http://username:password@IP:8080/gui/token.html").openConnection(); con.setRequestMethod("GET"); con.setDoOutput(true); con.setDoInput(true); System.out.println(con.getOutputStream().toString()); InputStream response = con.getInputStream(); System.out.println("RMessage" + con.getResponseMessage()); con.setRequestProperty("User-Agent", "Mozilla/5.0 ( compatible ) "); con.setRequestProperty("Accept","*/*"); BufferedReader reader = new BufferedReader(new InputStreamReader(response)); for (String line; (line = reader.readLine()) != null; ) { System.out.println(line + "NEKAJ SE JE ZGODILO V PRIDOBITVI"); } reader.close(); } catch (MalformedURLException e1) { e1.printStackTrace(); } catch (ProtocolException e1) { e1.printStackTrace(); } catch (IOException e1) { e1.printStackTrace(); }

Answer 1

您可以简单地使用Array的过滤方法：

render(){
    return (
        <div>
            {
                if(this.params.userId) {
                    const postsForUser = posts.filter(post => post.userId == this.params.userId);
                    //renderPostList(postsForUser)
                } else {
                    //renderPostList(posts)
                }
            }
        </div>
    )
}

在React / Redux

UPDATE：

更新2（修复）：

1 个答案: