如何基于AWS Amplify、DynamoDB在ReactJS中实现可编辑表格？

Got it, let's break down both of your requirements with practical, step-by-step solutions that you can implement right away:

Amplify simplifies the process of setting up DynamoDB and connecting it to your frontend—here's how to build the foundation:

Step 1: Initialize Amplify & Set Up DynamoDB #

• Start by initializing an Amplify project in your root directory:

  amplify init
  

  Follow the wizard prompts to configure your environment name, preferred code editor, and link your AWS account.
• Add a DynamoDB table with the command:

  amplify add storage
  

  Select NoSQL Database when prompted, then define your table schema (e.g., id as the primary key, plus fields like name, email, status for your editable table). Make sure to enable read/write permissions so your frontend can modify data.
• Push the configuration to AWS to create the table and generate API bindings:

  amplify push
  

  Amplify will auto-generate GraphQL queries/mutations and a aws-exports.js file for frontend configuration.

Step 2: Core Editable Table Logic #

Once the backend is set up, you’ll need to:

• Fetch data from DynamoDB using Amplify’s API.graphql method.
• Track which row is being edited with React state (e.g., editingId).
• Swap static text with input fields when a user clicks "Edit".
• Save changes by calling the auto-generated update mutation, then refresh the table data.

Building on the Amplify setup above, here’s a concrete React implementation with core functionality:

Step 1: Install Dependencies #

First, add Amplify packages to your React project:

npm install aws-amplify @aws-amplify/ui-react

Step 2: Configure Amplify #

In your src/index.js, import and configure Amplify using the auto-generated config file:

import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

Step 3: Build the Editable Table Component #

Here’s a minimal working component with edit/save/cancel functionality:

import { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
// Import auto-generated queries/mutations from Amplify
import { listUsers, updateUser } from './graphql/queries';

const EditableUserTable = () => {
  const [tableData, setTableData] = useState([]);
  const [editingId, setEditingId] = useState(null);
  const [formValues, setFormValues] = useState({ name: '', email: '' });

  // Fetch initial data on component mount
  useEffect(() => {
    loadTableData();
  }, []);

  const loadTableData = async () => {
    try {
      const response = await API.graphql(graphqlOperation(listUsers));
      setTableData(response.data.listUsers.items);
    } catch (err) {
      console.error('Failed to fetch data:', err);
    }
  };

  // Trigger edit mode for a specific row
  const startEditing = (user) => {
    setEditingId(user.id);
    setFormValues({ name: user.name, email: user.email });
  };

  // Save edited row to DynamoDB
  const saveEdit = async () => {
    try {
      await API.graphql(graphqlOperation(updateUser, {
        input: { id: editingId, ...formValues }
      }));
      setEditingId(null);
      loadTableData(); // Refresh table to show updated data
    } catch (err) {
      console.error('Failed to update user:', err);
    }
  };

  // Cancel edit mode
  const cancelEdit = () => {
    setEditingId(null);
    setFormValues({ name: '', email: '' });
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h2>Editable User Table</h2>
      <table border="1" cellPadding="8" cellSpacing="0">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {tableData.map(user => (
            <tr key={user.id}>
              <td>
                {editingId === user.id ? (
                  <input
                    type="text"
                    value={formValues.name}
                    onChange={(e) => setFormValues({ ...formValues, name: e.target.value })}
                    style={{ width: '150px' }}
                  />
                ) : (
                  user.name
                )}
              </td>
              <td>
                {editingId === user.id ? (
                  <input
                    type="email"
                    value={formValues.email}
                    onChange={(e) => setFormValues({ ...formValues, email: e.target.value })}
                    style={{ width: '200px' }}
                  />
                ) : (
                  user.email
                )}
              </td>
              <td>
                {editingId === user.id ? (
                  <>
                    <button onClick={saveEdit} style={{ marginRight: '8px' }}>Save</button>
                    <button onClick={cancelEdit}>Cancel</button>
                  </>
                ) : (
                  <button onClick={() => startEditing(user)}>Edit</button>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default EditableUserTable;

Pro Tips for Enhancement #

• Use a Table Library: For more complex features (sorting, pagination, bulk edits), integrate react-table or Material-UI Table with Amplify’s data fetching logic.
• Error Handling: Add user-friendly error messages (e.g., toast notifications) instead of just console logs.
• Authentication: If your app requires user-specific data, add Amplify Auth to restrict access to table rows based on user IDs.

内容的提问来源于stack exchange，提问作者WeCanBeFriends