javascript - 如何从状态中提取特定对象并获取其中一项？

Question

我有以下名为 Tweets.js 的组件：

import React, {Component} from "react";

export default class Tweets extends Component {
    constructor(props) {
        super(props);
        this.state = {tweets: [], users: []}; 
    }

    componentDidMount() {
        this.TweetList();
        this.UserList();
    }

    TweetList() {
        fetch('http://***.***.***.***:****/api/posts')
            .then(res => res.json())
            .then((data) => {
                this.setState({ tweets: data })
            })
            .catch(console.log);
    }

    UserList() {
        fetch('http://***.***.***.***:****/api/users')
            .then(res => res.json())
            .then((data) => {
                this.setState({ users: data })
            })
            .catch(console.log);
    }

    render() {
        const tweets = this.state.tweets.map((item, i) => (
            <div>
                <div class="tweet_box">
                    <p>{item.tweet}</p>
                </div>
            </div>
        ));

        const users  = this.state.users.map((item, i) => (
            <div>
                <h2>{item.twitterhandle}</h2>
            </div>
       ))

        return (
            <div className="tweet">{ tweets }</div>
        )
    }
}

用户 json:

[
 {
    "userid": 337282,
    "twitterhandle": "sean",
    "email": "[e-mail]"
  },
  {
    "userid": 1234563,
    "twitterhandle": "DidItWork",
    "email": "[e-mail]"
  },
  {
    "userid": 3728,
    "twitterhandle": "Isthisup",
    "email": "[e-mail]"
  },
  {
    "userid": 1234567,
    "twitterhandle": "blah",
    "email": "[e-mail]"
  }
]

帖子json：

[
  {
    "postid": 2,
    "tweet": "Hello, World #2",
    "userid_id": 337282
  },
  {
    "postid": 4,
    "tweet": "Hello, World #1",
    "userid_id": 3728
  },
  {
    "postid": 1,
    "tweet": "Hello, World #4",
    "userid_id": 3728
  },
  {
    "postid": 3,
    "tweet": " Hello, World! How's it?",
    "userid_id": 1234563
  }
]

我正在尝试从帖子 json 文件中返回帖子列表，并且我能够做到这一点。我的问题是，我怎样才能获取 userid_id 号码，在用户 json 文件中找到它，提取用户名，并将其显示在以下代码中？

const tweets = this.state.tweets.map((item, i) =>   
    <div>
        <div class="tweet_box">
            <p>{item.tweet}</p>
        </div>
    </div>
));

我所能完成的就是让它显示一个单独的用户列表，但我不知道如何将数据路由到上面的代码中——比如一个 h1 标签。

我很陌生，如果我的代码很糟糕，我很抱歉。我对我能看到的任何和所有建议或参考持开放态度。我查看了 React 文档并找到了关于键的部分，它似乎是正确的方向，但仍然无法弄清楚。

如果有什么我可以添加来澄清我的问题，请不要犹豫。

我感谢你所有的时间。

编辑：我正在尝试解决这个问题，并添加了以下功能：

GetUsername() {
    return this.state.users[1];
}

然后，我对渲染进行了以下更改：

const tweets = this.state.tweets.map((item, i) => (
    <div>
         <div class="tweet_box">
              <h1>{this.GetUsername()}</h1>
              <p>{item.tweet}</p>
         </div>
    </div>
));

我添加了

<h1>{this.GetUsername()}</h1>

这产生了以下错误：

错误：对象作为 React 子对象无效（找到：对象带有键 {userid、twitterhandle、email、password}）。如果您打算渲染一组子项，请改用数组。

标签： javascriptjsonreactjs

Answer 1

你很亲密。React 不直接渲染对象，但可以渲染原语，如字符串和数字。this.state.users[1]将始终返回users数组中的第二个用户对象，这可能不是您想要的。

更新您的实用程序以获取 id 并找到正确的用户对象。

getUserById = (id) => this.state.users.find(({ userid }) => userid === id);

然后在渲染中调用它以获取用户对象，如果找到则访问该twitterhandle属性。

const tweets = this.state.tweets.map((item, i) => (
    <div>
        <div class="tweet_box">
          <h1>{this.getUserById(item.userid_id)?.twitterhandle}</h1>
            <p>{item.tweet}</p>
        </div>
    </div>
));