求助：如何从嵌套数组提取单个数组并存储至React状态

Hey there! Let's walk through this step by step since you're new to React—no jargon, just straightforward, actionable steps 😊

First, let's align on what you're trying to do: you have a projects state holding an array of project objects, and you want to grab one of those objects (a single item from the array) and store it in a separate React state. Here's exactly how to make that happen:

1. Set Up Your Initial States #

First, confirm you've initialized your projects state with useState. Then create a new state to hold the single project you want to extract:

import { useState, useEffect } from 'react';

function YourProjectComponent() {
  // Your existing projects state with your array data
  const [projects, setProjects] = useState([
    {id: 1, title: "Business Web", category: "Web Design", deleted_at: "0000-00-00 00:00:00"},
    {id: 2, title: "Social App", category: "Mobile Development", deleted_at: "0000-00-00 00:00:00"},
    {id: 3, title: "Ecommerce", category: "Web Development", deleted_at: "0000-00-00 00:00:00"},
    {id: 4, title: "1", category: "1", deleted_at: "0000-00-00 00:00:00"},
    {id: 5, title: "123123", category: "Demo", deleted_at: "0000-00-00 00:00:00"}
  ]);

  // New state to hold your single extracted project (starts as null when no project is selected)
  const [selectedProject, setSelectedProject] = useState(null);

2. Extract the Single Project #

There are a few common ways to grab a single item from your projects array—pick the one that fits your use case:

Option 1: Extract by Index (e.g., Grab the First Item) #

If you want to pull an item by its position in the array (like the first item at index 0), you can do this when the component mounts or whenever the projects array updates:

// Run this logic when the component first loads or when projects changes
  useEffect(() => {
    // Always check the array isn't empty first to avoid errors
    if (projects.length > 0) {
      setSelectedProject(projects[0]); // Store the first project in our new state
    }
  }, [projects]); // Re-run this effect if the projects array changes

Option 2: Extract by ID (Find a Specific Project) #

If you need to target a project by its unique id (like the "Ecommerce" project with id 3), use the array find() method:

// Function to search for a project by its ID
  const getProjectById = (projectId) => {
    const foundProject = projects.find(project => project.id === projectId);
    if (foundProject) {
      setSelectedProject(foundProject); // Store the matched project
    } else {
      console.log("Oops, that project doesn't exist in the array!");
    }
  };

  // Call this function from a button click or other trigger:
  <button onClick={() => getProjectById(3)}>Load Ecommerce Project</button>

Option 3: Extract on User Interaction (e.g., Clicking a List Item) #

If you're rendering your projects as a list, let users click an item to select and store it:

return (
    <div className="project-wrapper">
      <h2>All Projects</h2>
      {/* Render the full list of projects */}
      {projects.map(project => (
        <div 
          key={project.id} 
          onClick={() => setSelectedProject(project)}
          style={{ padding: '10px', borderBottom: '1px solid #ddd', cursor: 'pointer' }}
        >
          <h3>{project.title}</h3>
          <p>Category: {project.category}</p>
        </div>
      ))}

      {/* Display the selected project only if one exists */}
      {selectedProject && (
        <div className="selected-project" style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f8f9fa' }}>
          <h3>Selected Project</h3>
          <p>ID: {selectedProject.id}</p>
          <p>Title: {selectedProject.title}</p>
          <p>Category: {selectedProject.category}</p>
        </div>
      )}
    </div>
  );
}

Quick Tips to Avoid Common Errors #

• Always check if the projects array is not empty before accessing items (prevents "cannot read property of undefined" crashes).
• When using map() to render projects, always include a unique key prop (using the project's id is ideal here).
• If find() doesn't match any project, it returns undefined—add a check to handle this case (like the console log in Option 2).

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