渲染到视图后从对象数组中获取记录

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function getUserById(users, id) {
  return users.find(user => user.id === id);
}

const user = getUserById(users, 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }

import React, { useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]);

  const getUserById = (id) => {
    return users.find(user => user.id === id);
  };

  const handleButtonClick = () => {
    const user = getUserById(2);
    console.log(user); // 输出: { id: 2, name: 'Bob' }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Get User by ID</button>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

<template>
  <div>
    <button @click="getUserById(2)">Get User by ID</button>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        { id: 3, name: 'Charlie' }
      ]
    };
  },
  methods: {
    getUserById(id) {
      const user = this.users.find(user => user.id === id);
      console.log(user); // 输出: { id: 2, name: 'Bob' }
    }
  }
};
</script>