如何从状态中拉出特定对象并获取其中一个项目？

Question

I have the following component named 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>
        )
    }
}

users json:

[
 {
    "userid": 337282,
    "twitterhandle": "sean",
    "email": "sean@sean.com"
  },
  {
    "userid": 1234563,
    "twitterhandle": "DidItWork",
    "email": "pleasework@work.com"
  },
  {
    "userid": 3728,
    "twitterhandle": "Isthisup",
    "email": "isthisup@up.com"
  },
  {
    "userid": 1234567,
    "twitterhandle": "blah",
    "email": "matt@knop.com"
  }
]

posts 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
  }
]

I am trying to return the list of Posts from the posts json file and I was able to accomplish that. My question is, how am I able to take the userid_id number, find it in the users json file, pull the username, and display it inside the following code?

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

All I have been able to accomplish is to get it to display a separate list of the users but I can't figure out how to route the data into the above code - in say, an h1 tag.

I am very new to react and I apologize if my code is terrible. I am open to any and all suggestions or reference I can look at. I looked through the React documentation and found the section on keys and it appeared to be the correct direction, but still couldn't figure it out.

If there is anything I can add to clarify my issue, please don't hesitate to ask.

I appreciate all of your time.

EDIT: I am attempting to work through the problem some more and added the following function:

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

I then made the following changes to my render:

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

I added

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

Which produced the following error:

Error: Objects are not valid as a React child (found: object with keys {userid, twitterhandle, email, password}). If you meant to render a collection of children, use an array instead.

Answer 1

You are close. React doesn't render objects directly but can render primitives, like strings and numbers. this.state.users[1] will always return the second user object in the users array, which probably isn't what you want.

Update your utility to take an id and find the correct user object.

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

Then call that in the render to get the user object and if found access the twitterhandle property.

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>
));

Answer 2

This GetUserName method returns an object (the user's object). It cannot render an object, but it can render a string or a number. for example:

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

Also you can return a array and iterate with a map like you do in the const "tweet"

Answer 3

The error you are getting, "Objects are not valid as a React child" , is because your GetUsername function actually returns the whole user object instead of just the username. You need to change this.state.users[1] to this.state.users[1].twitterhandle .

But we want to find the right user for each tweet, not just return the first user all the time. We do this by looking through the users array and finding the element where user.userid matches tweet.userid_id .

Let's make a getUsername function that takes the numeric user id as an argument:

getUsername( id ) {
    const user = this.state.users.find( user => user.id === id );
    if ( user ) {
       return user.twitterhandle;
    } else {
        return '';  // fallback to return an empty string if no user was found
    }
}

(You can write that a lot more concisely, but I wanted to be clear about the intention)

Now we can call that with the id from the tweet item

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