如何将Promise.all处理后的dataMap对象正确存入React的useState状态？

Let's break down what's likely causing issues with your setResults call and fix things up properly:

Key Issues in Your Current Code #

• Mismatched Initial State Type: You initialized results as an empty array [], but you're trying to store an object (dataMap) in it. This can lead to confusing behavior when rendering or accessing state later.
• Mutable State Update (Optional but Best Practice): While your direct modification of dataMap might work, React encourages immutable state updates to ensure consistent re-renders. Directly mutating objects can sometimes lead to unexpected behavior if references don't change properly.
• Missing Error Handling: Your async fetch calls don't have error handling, which means any failed request will break the whole flow silently.

Fixed Implementation #

Here's the revised code with these issues addressed:

export default function Home() {
  // Initialize state as an empty object to match dataMap's type
  const [results, setResults] = useState({});

  const fetchResults = async () => {
    try {
      const res = await fetch('someurl');
      const data = await res.json();
      
      // Create initial dataMap (unchanged)
      const dataMap = data.reduce((acc, curr) => {
        return { ...acc, [curr.id]: curr };
      }, {});

      // Fetch all color data in parallel
      const requests = Object.keys(dataMap).map(async (productId) => {
        const request = await fetch(`someUrl/${productId}`);
        // Add check for successful response
        if (!request.ok) throw new Error(`Failed to fetch product ${productId}`);
        return request.json();
      });

      const responseAll = await Promise.all(requests);

      // Create a NEW object instead of mutating dataMap directly
      const updatedDataMap = { ...dataMap };
      responseAll.forEach(({ id, color }) => {
        updatedDataMap[id] = { ...updatedDataMap[id], color };
      });

      // Update state with the new object
      setResults(updatedDataMap);
    } catch (error) {
      // Handle errors gracefully
      console.error('Error fetching data:', error);
    }
  };

  // Trigger fetch on component mount
  useEffect(() => {
    fetchResults();
  }, []);

  return (
    <div>
      {/* Example rendering: loop through results object */}
      {Object.values(results).map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>Color: {product.color}</p>
        </div>
      ))}
    </div>
  );
}

What Changed & Why #

1. Fixed Initial State: Changed useState([]) to useState({}) so the state type matches the object we're storing. This avoids type mismatches when accessing results later.
2. Immutable Update: Instead of modifying the original dataMap, we create a copy with const updatedDataMap = { ...dataMap }, then update the copy. This ensures React detects the state change (since it's a new object reference) and triggers a re-render correctly.
3. Added Error Handling: Wrapped the async logic in a try/catch block and added a check for request.ok to catch failed requests. This prevents silent failures and makes debugging easier.
4. Added useEffect: Added useEffect to call fetchResults when the component mounts (included here for completeness if you hadn't already set this up).

If you were seeing issues like the state not updating, or rendering problems, these changes should resolve those. Let me know if you're still hitting specific errors!

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