reactjs - 在不使用 this.state 的情况下从 reactjs 中的数组返回值

Question

我有 3 个元素数组(用户、评论、评级)，我需要其中的 2 个元素从第一个元素输出相应的值。像这样的东西:

functionComments(users_id)
{
returns the coresponding comments after iterating through}

functionRatings(users_id){returns the coresponding ratings after iterating}

{this.state.Users.map(u=>{

{<Card >{functionComments(u.id)<Card/>}
{<Card >{functionRatings(u.id)<Card/>}
})} 

但我不知道如何在不使用 this.state 的情况下返回值

User 数组中的元素如下所示

Users: {
                "firstName": "diana",
                "lastName": "diana",
                "age": "0",
                "email": "mari@yahoo.com",
                "password": "123456",
                "name": "diana",
                "username": "Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2",
                "description": "12346",
                "address": null,
                  "id":45
    }
    
    Comments:
    
       {
                "username": "Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2",
                "commentsList": [
                    {
                        "comment": "loc",
                        "id": 40,
                        "username": "Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2",
                        "movieID": "tt6048922"
                    }
                ]
            }
    
    Ratings
    
    {
                "username": "Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2",
                "ratingsList": [
                    {
                        "rating": 5,
                        "id": 50,
                        "username": "Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2",
                        "movieID": "tt3089630"
                    }
                ]
            }
    

我想要得到的输出JSON:

  {
    username: usernameleters,
    firstName: userFirstName,
    commentsList:[
       {
            comments:"comm"
            movieID:"movie"
       }],
    ratingsList:[
        {
          rating:"rrt"
          movieID:"mm"
        }] 

}

3 个数组的提取看起来像这样:

async  reloadObjectiveList() {
        await  UserApiService.fetchUsers()
            .then((res) => {
                this.setState({
                    Users: res.data.result
                })
            });

     await   CommentApiService.fetchComments()
            .then((res) => {
                console.log( res.data.result)
                this.setState({

                    Comments:  res.data.result
                })
            });    console.log(this.state.Comments)
     await   RatingApiService.fetchrating()
            .then((res) => {
                console.log( res.data.result)
                this.setState({

                    Ratings:  res.data.result
                })
            });
     }
   componentDidMount()
    {
        this.reloadObjectiveList();
        const userData = (this.mergeData(this.state.Users, this.state.Comments, this.state.Ratings));
        console.log("user data "+ this.userData)
        this.setState({UserData:this.userData})


    }

Answer 1

也许你可以遵循这个简单的方法

我假设你的输入看起来像这样

const users = [
  {
    firstName: 'diana',
    lastName: 'diana',
    age: '0',
    email: 'mari@yahoo.com',
    password: '123456',
    name: 'diana',
    username: 'Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2',
    description: '12346',
    address: null,
    id: 45,
  },
];

const Comments = [
  {
    username: 'Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2',
    commentsList: [
      {
        comment: 'loc',
        id: 40,
        username: 'Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2',
        movieID: 'tt6048922',
      },
    ],
  },
];

const Ratings = [
  {
    username: 'Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2',
    ratingsList: [
      {
        rating: 5,
        id: 50,
        username: 'Rn9h8fJfs1XvTv1Y9Sr1mXWB7ib2',
        movieID: 'tt3089630',
      },
    ],
  },
];

这将按照您的预期生成响应

const getUserdata = () => {
  const finalUsersData = users.map(user => {
    const userOutput = {
      username: user.username,
      firstName: user.firstName,
    };
    const userComments = Comments.find(comment => comment.username === user.username);
    userOutput.commentsList = userComments ? userComments.commentsList : [];

    const userRatings = Ratings.find(rating => rating.username === user.username);
    userOutput.userRatings = userRatings ? userRatings.ratingsList : [];

    return userOutput;
  });

  return finalUsersData;
};

输出是这样的

  {
    username: usernameleters,
    firstName: userFirstName,
    commentsList:[
       {
            comments:"comm"
            movieID:"movie"
       }],
    ratingsList:[
        {
          rating:"rrt"
          movieID:"mm"
        }] 

}

请根据需要更新引用资料。如果您在状态中存储 users 、comments 和 ratings 确保您引用然后使用 this.state.users等等。