React useOptimistic 冲突解决：精通乐观更新合并逻辑

            import React, { useState, useOptimistic } from 'react';

function Counter() {
  const [count, setOptimisticCount] = useOptimistic(
    0, // Initial state
    (state, optimisticValue) => {
      // Merge logic: returns the optimistic value
      return optimisticValue;
    }
  );

  const [isUpdating, setIsUpdating] = useState(false);

  const handleIncrement = async () => {
    const optimisticValue = count + 1;
    setOptimisticCount(optimisticValue);
    setIsUpdating(true);

    try {
      // Simulate an API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      // On success, no special action needed, state is already updated.
    } catch (error) {
      // Handle failure, potentially rollback or show an error.
      setOptimisticCount(count); // Revert to previous state on failure.
      console.error('Increment failed:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    

      
Count: {count}
      
        {isUpdating ? 'Updating...' : 'Increment'}
      
    
  );
}

export default Counter;

            

              
                Copy
              
            
          

            
import React, { useState, useOptimistic } from 'react';

function Counter() {
  const [count, setOptimisticCount] = useOptimistic(
    0, // Initial state
    (state, optimisticValue) => {
      // Merge logic - updates the count to the optimistic value
      return optimisticValue;
    }
  );

  const [isUpdating, setIsUpdating] = useState(false);
  const [lastServerCount, setLastServerCount] = useState(0);

  const handleIncrement = async () => {
    const optimisticValue = count + 1;
    setOptimisticCount(optimisticValue);
    setIsUpdating(true);

    try {
      // Simulate an API call
      const response = await fetch('/api/increment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ count: optimisticValue }),
      });

      const data = await response.json();
      if (data.success) {
          setLastServerCount(data.count) //Optional to verify. Otherwise can remove the state.
      }
       else {
          setOptimisticCount(count) // Revert the optimistic update
       }
    } catch (error) {
      // Revert on error
      setOptimisticCount(count);
      console.error('Increment failed:', error);
    } finally {
      setIsUpdating(false);
    }
  };

  return (
    

      
Count: {count} (Last Server Count: {lastServerCount})
      
        {isUpdating ? 'Updating...' : 'Increment'}
      
    
  );
}

export default Counter;

            

              
                Copy
              
            
          

            
import React, { useState, useOptimistic } from 'react';

function ItemList() {
  const [items, setItems] = useState([{
    id: 1,
    text: 'Item 1'
  }]); // initial state

  const [optimisticItems, setOptimisticItems] = useOptimistic(
    items, //Initial state
    (state, optimisticValue) => {
      //Merge logic - replaces the current state
      return optimisticValue;
    }
  );

  const [isAdding, setIsAdding] = useState(false);
  const [isRemoving, setIsRemoving] = useState(false);

  const handleAddItem = async () => {
    const newItem = {
      id: Math.random(),
      text: 'New Item',
      optimistic: true, // Mark as optimistic
    };
    const optimisticList = [...optimisticItems, newItem];
    setOptimisticItems(optimisticList);
    setIsAdding(true);

    try {
      //Simulate API call to add to the server.
      await new Promise(resolve => setTimeout(resolve, 1000));

      //Update the list when the server acknowledges it (remove the 'optimistic' flag)
      const confirmedItems = optimisticList.map(item => {
        if (item.optimistic) {
          return { ...item, optimistic: false }
        }
        return item;
      })
      setItems(confirmedItems);
    } catch (error) {
        //Rollback - Remove the optimistic item on error
        const rolledBackItems = optimisticItems.filter(item => !item.optimistic);
        setOptimisticItems(rolledBackItems);
    } finally {
      setIsAdding(false);
    }
  };

  const handleRemoveItem = async (itemId) => {
    const optimisticList = optimisticItems.filter(item => item.id !== itemId);
    setOptimisticItems(optimisticList);
    setIsRemoving(true);

    try {
      //Simulate API call to remove the item from the server.
      await new Promise(resolve => setTimeout(resolve, 1000));
      //No special action here. Items are removed from the UI optimistically.
    } catch (error) {
        //Rollback - Re-add the item if the removal fails.
        //Note, the real item could have changed in the server.
        //A more robust solution would require a server state check.
        //But this simple example works.
        const itemToRestore = items.find(item => item.id === itemId);
        if (itemToRestore) {
            setOptimisticItems([...optimisticItems, itemToRestore]);
        }
        // Alternatively, fetch the latest items to re-sync
    } finally {
      setIsRemoving(false);
    }
  };

  return (
    

      

        {optimisticItems.map(item => (
          

            {item.text} - {
              item.optimistic ? 'Adding...' : 'Confirmed'
            }
             handleRemoveItem(item.id)} disabled={isRemoving}>Remove
          
        ))}
      
      
        Add Item
      
    
  );
}

export default ItemList;

            

              
                Copy
              
            
          

            
import React, { useState, useOptimistic, useRef } from 'react';

function EditableField({ initialValue, onSave, isEditable = true }) {
  const [value, setOptimisticValue] = useOptimistic(
    initialValue,
    (state, optimisticValue) => {
      return optimisticValue;
    }
  );
  const [isSaving, setIsSaving] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const inputRef = useRef(null);

  const handleEditClick = () => {
    setIsEditing(true);
  };

  const handleSave = async () => {
    if (!isEditable) return;
    setIsSaving(true);
    try {
      await onSave(value);
    } catch (error) {
      console.error('Failed to save:', error);
      //Rollback
      setOptimisticValue(initialValue);
    } finally {
      setIsSaving(false);
      setIsEditing(false);
    }
  };

  const handleCancel = () => {
    setOptimisticValue(initialValue);
    setIsEditing(false);
  };

  return (
    

      {isEditing ? (
        

           setOptimisticValue(e.target.value)}
          />
          
            {isSaving ? 'Saving...' : 'Save'}
          
          Cancel
        
      ) : (
        
          {value}
        
      )}
    
  );
}

export default EditableField;

            

              
                Copy