更新父状态时更新子组件

Question

When there is a new update in my parent component, which occur within the function updateItemValue() , the items state will only get updated in parent. The child component won't get updated in an instance. It only get updated when the updateItemValue() get triggered twice.

It's something like:

• 1st round, parent update the items, child didn't receive the update.
• 2nd round, parent update the items, child only receive the update from 1st round

Parent Component

const SelectItem = () => {
    const { items } = useSelector(state => state.itemsReducer);
    const [ itemUpdate, setItemUpdate ] = useState(false);
    const [ group_id, setGroupId ] = useState(false);

    useEffect(() => {
        updateItemValue()
    }, [itemUpdate])
     
    function updateItemValue(){
        // original items value
        /*
            [
                {"_id":1, "name":"Item 1", "description":"Item 1 description"},
                {"_id":2, "name":"Item 2", "description":"Item 2 description"},
                {"_id":3, "name":"Item 3", "description":"Item 3 description"}
            ]
        */
    
        // step 3 : now this function get called because the group_id is updated
        items.forEach((item, i) => {
            if (group_id == item.group_id) {
                // step 4 : update the value of items state, add extra data, once this updated, I expect the new items value to be passed to child component
                items[i].extra = true;
            }
        });
    }
    
    // step 2 : update the group_id and set the itemUpdate to true to trigger useEffect
    function selectGroup(group_id){
        setItemUpdate(true)
        setGroupId(group_id)
    }
    
    return(
        <div>
            {/* step 1: select option */}
            <button onClick={() => selectGroup(1)}>Option 1</button>
            <button onClick={() => selectGroup(2)}>Option 2</button>
            {
                items.map((item) => (
                    <ItemCard
                      key={item._id}
                      id={item._id}
                      name={item.name}
                      description={item.description}
                      onClick={(value) => updateSelectedItem(value)}
                    />
                ))
            }
        </div>
    )
}

Child Component

export default function ItemCard({id, name, description, onClick, extra}){
    console.log(extra)  // the value is undefined when selectGroup() 1st triggered from parent
    return (
        <div onClick={() => onClick(id)}>
          <div>
            <p>{name}</p>
            <p>{description}</p>
            { extra ? '<p>Extra item is required</p>' : null }
          </div>
        </div>
    )
}

p/s : the state items came from redux state. So the state update at updateItemValue() is to add some extra value which I want to use at child component.

Answer 1

Issue

You are mutating an object reference

function updateItemValue(){
  items.forEach((item, i) => {
    if (group_id == item.group_id) {
      items[i].extra = true; // <-- state object mutation!
    }
  });
}

Solution

Looks like you are using Redux since you are using the useSelector react hook.

const { items } = useSelector(state => state.itemsReducer);

I'll assume you have access to a useDispatch hook and action to dispatch to update your state as well.

You can likely simplify your component code a bit, and move the update logic to the reducer so stat is correctly updated.

const SelectItem = () => {
  const { items } = useSelector((state) => state.itemsReducer);
  const dispatch = useDispatch();

  // step 2: dispatch action to update state via the group_id
  function selectGroup(groupId) {
    dispatch({ type: "UPDATE_GROUP", groupId });
  }

  return (
    <div>
      {/* step 1: select option */}
      <button onClick={() => selectGroup(1)}>Option 1</button>
      <button onClick={() => selectGroup(2)}>Option 2</button>
      {items.map((item) => (
        <ItemCard
          key={item._id}
          id={item._id}
          name={item.name}
          description={item.description}
          onClick={(value) => updateSelectedItem(value)}
        />
      ))}
    </div>
  );
};

I'm going to just guess at the reducer function now, it may be similar to the following.

const initialState = {
  items: [],
}

const itemsReducer = (state = initialState, action) => {
  switch (action.type) {

    ...

    // step 3: update items array by matching item group id
    case "UPDATE_GROUP":
      return {
        ...state,
        items: state.items.map((item) =>
          item.group_id === action.groupId
            ? {
                ...item,
                extra: true
              }
            : item
        )
      };

    ...

    default:
      return state;
  }
};

Additional Suggestion

You can also simplify the child component ItemCard a bit. Direct attach the click handler and simplify the conditional rendering. Also, I don't know if it was intentional ( I think not ), but you may not want the string literal "<p>Extra item is required</p>" rendering.

function ItemCard({ name, description, onClick, extra }) {
  return (
    <div onClick={onClick}>
      <div>
        <p>{name}</p>
        <p>{description}</p>
        {extra && <p>Extra item is required</p>}
      </div>
    </div>
  );
}

And update the mapping in the parent. Don't pass an id prop, but pass the item._id to the updateSelectedItem callback.

{items.map((item) => (
  <ItemCard
    key={item._id}
    name={item.name}
    description={item.description}
    onClick={() => updateSelectedItem(item._id)}
  />
))}