[React]useReducerでネスト・入れ子されたオブジェクトを格納

Form_nexted_objects.js]

export const initialState = {
  postDetail: { 
       postContent: ""
       comments: [{
          commentContent: ""
       }] 
   },
};
    case COMMENT_INPUT_TEXT:
      return { 
        ...state, 
        postDetail: {
          ...state.postDetail,
          comments: [
            ...state.postDetail.comments.slice(0, action.index),
            { ...state.postDetail.comments[action.index], [action.field]: action.payload },
            ...state.postDetail.comments.slice(action.index + 1),
          ],
        }
      };


  const handleCommentChange = (event) => {
    postDispatch({ 
      type: COMMENT_INPUT_TEXT,
      field: event.target.name,
      payload: event.target.value
    });
  };

  <input
    label="comment"
    multiline
    rows={6}
    name="commentContent"
    value={comments.commentContent}
    onChange={handleCommentChange}
  /> <br />